为什么我的指令会抛出"错误:$ injector:unpr未知提供商"

时间:2015-05-16 04:41:45

标签: javascript angularjs angularjs-directive

我正在努力将我的控制器,工厂和指令重构为Angular-Style-Guide推荐的Angular Snippets

我已经让控制器和工厂正确使用新风格,但不是指令。

Unknown provider: $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;

            }]
        }
    });

})();

2 个答案:

答案 0 :(得分:5)

$scope无法注入指令。我已经更改了代码以在指令控制器中注入$scope

<强>代码:

&#13;
&#13;
(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) {

    }
})();
&#13;
&#13;
&#13;

答案 1 :(得分:5)

我知道你得到了答案,但让我解释一下实际情况。

$ scope不是服务(角度js中不存在$scopeProvider)它是一种特殊的东西,由角度本身作为$rootScope.

的孩子注入控制器

所以你不能在服务,指令......等中明确地注入它。

但正如jad-panda&#39;你可以在direcitve的控制器中明确地注入它(而不是直接注入指令)。