$scopeProvider 问题

Question

我有一个如下所示的 js 文件。

(function(){

    angular.module("MyModule",[])
    .service('testService',testService)
    .directive("testDirective",testDirective);;

    function testDirective(testService){
         var directive = {
          template: '<input type="text">',
          restrict: 'EA'
        };
        return directive;
    }

    function testService($scope){
        $scope.name = "testName";
    }

}())

当我加载页面时，出现如下错误。

Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- inputResourceService <- inputResourceDirective

请帮我解决这个问题。

Answer 1

我认为您不能在服务中使用这样的范围。我会说服务的行为有点像 Java 中的 class，因此您可以从控制器调用它的方法。

我不知道你的疑问是否比你所展示的更复杂，但你可以这样重写这段代码：

(function(){

angular.module("MyModule",[])
.directive("testDirective",testDirective);

function testDirective(testService){
     var directive = {
      template: '<input type="text">',
      restrict: 'EA',
      controller: function ($scope) {
          $scope.name = 'testName';
      }
    };
    return directive;
}

}())

为指令而不是服务使用控制器。

Answer 2

$scope 服务在服务中不可用。如果你真的需要$scope，你可以使用$rootScope代替：

 (function(){

    angular.module("MyModule",[])
    .service('testService',testService)
    .directive("testDirective",testDirective);;

    function testDirective(testService){
         var directive = {
          template: '<input type="text">',
          restrict: 'EA'
        };
        return directive;
    }

    function testService($rootScope){
        $scope.name = "testName";
    }

}())

但是，在服务中注入 $scope 或 $rootScope 没有任何意义。

Answer 3

$scope dependency will never be available inside service function

您应该在您的服务中创建一个变量，以便在所有 angular 组件

之间轻松共享

(function(){

    angular.module("MyModule",[])
    .service('testService',testService)
    .directive("testDirective",testDirective);;

    function testDirective(testService){
         var directive = {
          template: '<input type="text" ng-model="something">',
          restrict: 'EA',
          link: function(scope, element, attrs){
              scope.name = testService.name; //assigned service variable value to scope
          }
        };
        return directive;
    }

    function testService(){
        var testService = {}
        testService.name = "testName";
        return testService;
    }

}())

Working Plunkr

$scopeProvider 问题

Issue with $scopeProvider

javascript

angularjs

angularjs-directive

angularjs-service

angularjs-controller