javascript - 为什么我不能注入(inject)我的服务？

Question

我有以下新服务:

var SignatureService = function ($scope) {

    this.announce = function () {
        alert($scope.specificName);
    }
};
SignatureService.$inject = ['$scope'];

这是为应用程序声明的，如下所示:

MyAngularApp.service('SignatureService', SignatureService);

其他几个服务以完全相同的方式添加到应用程序中，它们似乎都运行正常。然后我有一个 Controller 声明和定义如下:

MyAngularApp.controller('MyController', MyController);
...
var MyController = function ($scope, Service1, Service2, $location, $modal, SignatureService) {
...
}
MyController.$inject = ['$scope', 'Service1', 'Service2', '$location', '$modal', 'SignatureService'];

我只是使用稍微非常规的方式来定义服务并将其注入(inject)我正在处理的应用程序中的标准，因为这适用于所有现有服务，我更愿意按照标准简单地插入我的服务。

当 Controller 加载时，我在浏览器控制台中得到一个 [$injector:unpr]，错误信息:

$injector/unpr?p0=$scopeProvider <- $scope <- SignatureService

Answer 1

您不能将 $scope 注入(inject)到您的自定义服务中。它只是没有意义，因为 SignatureService 可以注入(inject)任何地方，包括其他服务和其他控件。如果您说将 $scope 注入(inject)到两个嵌套 Controller 中，应该注入(inject)哪个？

Scope 对象 ($scope) 总是与某个 DOM 节点关联，它附加到它。这就是您在 Controller 和指令中看到 $scope 的原因。这就是为什么不能在服务中使用它的原因:服务与特定的 DOM 元素无关。当然，您可以注入(inject) $rootScope 但这不太可能是您在问题中需要的。

总结:$scope 是从$rootScope 中创建的，并注入(inject)到必要的 Controller 中，但您不能将其注入(inject)到自定义服务中。

UPD. 根据评论，您希望使用服务来定义可重用的 Controller 方法。在这种情况下，我会采用我称之为 mixin 的方法。在服务中定义方法并将它们混合在必要的 Controller 中。

app.service('controllerMixin', function() {
    this.getName = function() {
        alert(this.name);
    };
});

然后使用 angular.extend 扩展 Controller 范围:

app.controller('OneController', function($scope, controllerMixin) {
    angular.extend($scope, controllerMixin);
    // define controller specific methods
});

app.controller('TwoController', function($scope, controllerMixin) {
    angular.extend($scope, controllerMixin);
    // define controller specific methods
});

这非常有效，因为 controllerMixin 没有任何 $scope 的概念，当混合到 Controller 中时，您使用 this< 引用范围。如果您更喜欢使用 controllerAs 语法，服务也不会改变，您只需扩展 this:

angular.extend(this, controllerMixin);

演示: http://plnkr.co/edit/ePhSF8UttR4IgeUjLRSt?p=info