为什么我的指令会抛出“Error: $injector:unpr Unknown Provider”错误？

Question

我正在重构我的控制器、工厂和指令，以符合Angular-Style-Guide和Angular Snippets的建议。

我已经按照新的风格正确地处理了控制器和工厂，但是指令还没有。

未知的提供者：$scopeProvider <- $scope <- platformHeaderDirective 带错误的新指令样式：

(function() { "use strict";

    angular
        .module('platformHeaderDirectives', [])
        .directive('platformHeader', directive);
    directive.$inject = ['$scope'];
    /* @ngInject */
    function directive ($scope) {
        var directive = {
            templateUrl : "header/platform_header/platformHeader.html",
            restrict    : "E",
            replace     : true,
            bindToController: true,
            controller: Controller,
            controllerAs: 'vm',
            link: link,
            scope: {
            }
        };
        return directive;
        function link(scope, element, attrs) {

        }
    }
    /* @ngInject */
    function Controller () {

    }
})();

我的旧工作指令不会抛出错误：

(function() { "use strict";

    angular.module('platformHeaderDirectives', [])

    .directive('platformHeader', function() {
        return {
            templateUrl : "header/platform_header/platformHeader.html",
            restrict    : "E",
            replace     : true,
            scope       : false,
            controller  : ['$scope',
                           function($scope) {

                /** Init platformHeader scope */
                // var vs = $scope;

            }]
        }
    });

})();

- Leon Gaban

---

指令不支持 scope 注入，请移除并重试。 - Chandermani

@Chandermani 啊！就是这个问题！！！谢谢 :) 嗯，我需要为那个仓库提出一个问题请求。 - Leon Gaban

Answer 1

$scope 不能被注入到指令中。我已经修改了代码，在指令的控制器中注入 $scope。

代码：

(function() { "use strict";

    angular
        .module('platformHeaderDirectives', [])
        .directive('platformHeader', directive);
    
    /* @ngInject */
    function directive () {
        var directive = {
            templateUrl : "header/platform_header/platformHeader.html",
            restrict    : "E",
            replace     : true,
            bindToController: true,
            controller: Controller,
            controllerAs: 'vm',
            link: link,
            scope: {
            }
        };
        return directive;
        function link(scope, element, attrs) {

        }
    }
    /* @ngInject */
    Controller.$inject = ['$scope'];
    function Controller ($scope) {

    }
})();

- jad-panda

Answer 2

我知道你已经得到了答案，但是让我解释一下实际情况。 $scope不是一个服务（在angular js中不存在$scopeProvider），它是一种特殊的东西，由angular本身注入到控制器中作为$rootScope的子级。

因此，您不能在服务、指令等中显式注入它。

但是，正如“jad-panda”所解释的那样，您可以在控制器中显式注入它，而不是直接注入到指令中。

- squiroid

---

感谢您的额外反馈 :) - Leon Gaban