2016-05-17 5 views
2

Я хотел бы создать сервис и контроллер в AngualrJS. Проблема в том, что мне нужно получить доступ к $ scope в моем сервисе. Я думаю, что хорошим решением является прямое подключение этой службы к контроллеру, но я не знаю, как это сделать. Это мой HTML:Неизвестный поставщик с AngularJS

   <div ng-controller="myController"> 
        <input type="text" id="idInput" name="idInput" ng-model="nameModel"> 
        <button class="btn btn-default" ng-click="functionWhenClick()">Execute</button> 
       </div> 

Это мой контроллер:

var variableModuleName = angular.module("nameModule",[]); 
variableModuleName.controller('controllerName',function($rootScope,$scope, CommonService) { 
    $scope.nameModel = ''; 
    $scope.scopeFunctionName = function() { 
     CommonService.myFunction($scope.nameModel); 
    }; 
}); 

Это моя служба:

variableModuleName.service('CommonService', ['dataService', function(dataService) { 
    this.loadData = function(param) { 
     dataService.getCommitData(param).then(function(res) { 
      if (res.error) { 
       $scope.chartData = res.chartData; 
      } 
     }); 
    }; 

    this.myFunction = function(concatURL){ 
     this.loadData('URL' + concatURL); 
    } 
}]); 

Я надеюсь, что вы можете мне помочь. Спасибо.

+0

Преимущество службы заключается в том, что вы можете обмениваться своим сервисом с любым контроллером, так как в течение этого времени служба вводится в этот контроллер. вместо использования $ scope.charData, попробуйте определить this.charData = ''; – mtamma

+0

Как сиднейд, ваш код выглядит немного испорченным, попробуйте стильный стиль Джона Паппы: https://github.com/johnpapa/angular-styleguide/tree/master/a1 – Baki

ответ

0

Во-первых, не используйте var d3DemoApp = angular.module("D3demoApp",[]) через свои файлы.

Используйте angular.module("D3demoApp",[]) один раз, чтобы получить ваш модуль экземпляра, а затем получить ссылку уже существующего с использованием angular.module("D3demoApp")

В вашем plknr:

  1. Вы забываете включить файл службы
  2. Я не» Нет никакого определения dataService, поэтому у вас есть unknown provider dataServiceProvider error.
-1

сервис

d3DemoApp.service('CommonService', ['dataService', function(dataService) { 
    this.chartData = ''; 

    this.loadData = function(param) { 
     dataService.getCommitData(param).then(function(res) { 
      if (!res.error) { 
       this.chartData = res.chartData; 
      } 

     }); 
    }; 

    this.myFunction = function(parameterItem){ 
     this.loadData('http://localhost:3412/bubble/' + parameterItem); 
     console.log("Fonction appellée"); 
    } 
}]); 

контроллер

var d3DemoApp = angular.module("D3demoApp",[]); 
d3DemoApp.controller('controllerFilterSearch',function($rootScope,$scope, CommonService) { 
    $scope.searchText = ''; 
    $scope.getSearchText = function() { 
     CommonService.myFunction($scope.searchText); 
     $scope.searchText = CommonService.chartData; 
    }; 
}); 
0

Есть много способов сделать это. Моим фаворитом является создание другой службы, которая ссылается на область действия.

d3DemoApp.service('scopeServer', ['dataService', function(dataService) { 

    var scope; 

    return { 
     scope: function(_scope) { 
      if (typeof _scope !== 'undefined') 
       scope = _scope; 

      return scope; 
     } 
    } 

}]); 

Эта служба поддерживает ссылку на объем в одноточечного возвращает его туда, куда вы звоните scopeService.scope();

Вы можете задать область в контроллере изначально.

d3DemoApp.controller('controllerFilterSearch',function($rootScope,$scope, scopeServer) { 

    scopeServer.scope($scope); 

}); 
0
<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> 
    <script src="controllerInput.js"></script> 
    <script src="app.js"></script> 
    <script src="serviceInput.js"></script> <!-- Include --> 
    </head> 

    <body ng-app="D3demoApp" ng-controller="controllerFilterSearch"> 
    <input type="text" id="searchTextBox" name="searchTextBox" ng-model="searchText"> 
    <button class="btn btn-default" ng-click="getSearchText()">Rechercher</button> 
    </body> 

</html> 

var d3DemoApp = angular.module("D3demoApp",[]); 
d3DemoApp.controller('controllerFilterSearch',function($rootScope,$scope, CommonService) { 
    $scope.searchText = ''; 
    $scope.getSearchText = function() { 
     CommonService.myFunction($scope.searchText); 
    }; 
}); 
+0

Пришли ли вы, чтобы сделать работы Plunker? Вы можете просто поставить предупреждение на тело loadData ... – Anonyme

0

Прежде всего, Вы не можете/не должны использовать $scope в службе. Вы не можете ввести $scope в услугу. Вы можете передать $scope в качестве параметра функции, но это плохая идея. Потому что мы не хотим, чтобы наша служба играла со всеми нашими переменными $scope. Теперь, чтобы переписать службу, чтобы вернуть chartData из операции async, используя dataService (при условии, что dataService.getCommitData(param) действительно имеет вызов на сервер), вам нужно хорошо выполнить обещание.

var d3DemoApp = angular.module("D3demoApp",[]); 

// service. Assuming dataService exists 
d3DemoApp.service('CommonService', ['dataService', function(dataService) { 
    this.loadData = function(param) { 
     return dataService.getCommitData(param).then(function(res) { 
      // Should the if condition be res.error or !res.error 
      if (res.error) { 
       return res; 
      } 
     }); 
    }; 

    this.myFunction = function(parameterItem){ 
     return this.loadData('http://localhost:3412/bubble/' + parameterItem); 
     console.log("Fonction appellée"); 
    } 
}]); 

// controller 
d3DemoApp.controller('controllerFilterSearch',function($rootScope,$scope, CommonService) { 
    $scope.searchText = ''; 
    $scope.getSearchText = function() { 
     CommonService.myFunction($scope.searchText).then(function(res) { 
      $scope.chartData = res.chartData; 
     }); 
    }; 
}); 

Так, в приведенном выше коде, я в основном возвращающая обещание от this.loadData функции.Когда мы вызываем CommonService.myFunction из контроллера, получаем ответ в разрешенной функции обратного вызова then, и мы устанавливаем chartData от ответа на $scope.chartData.

+0

Здравствуйте, у меня есть ошибка. CommonService не определен на моем контроллере .Bubble: 'CommonService.myFunction ($ scope.searchText);' – Anonyme

+0

Вы вводили 'CommonService' в контроллер ваше приложение? Также проверьте, существуют ли какие-либо опечатки. – Saad

+0

Да, вы пришли, чтобы сделать работы Plunker? Вы можете просто поставить предупреждение на тело loadData ... – Anonyme