Why is my directive throwing "Error: $ injector: unpr Unknown Provider"
I have been working on refactoring my controllers, factories and directives into the recommended Angular-Style-Guide for Angular Fragments .
I got controllers and factories that worked correctly with the new style, but not directives.
Unknown provider: $scopeProvider <- $scope <- platformHeaderDirective
New style of directive with errors:
(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 () {
}
})();
My old working directive that throws no errors:
(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;
}]
}
});
})();
source to share
$scope
cannot be injected into a directive. I changed the code to inject $scope
directives into the controller.
Code:
(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) {
}
})();
source to share
I know you got your answer, but let me explain the real picture.
$ scope is not a service ( $scopeProvider
does not exist in angular js), it is something special that is injected by angular itself into the controller as a child$rootScope.
so you cannot explicitly inject it into a service, directive, etc.
But since the answer is explained by "jad-panda", you can explicitly inject it into the directcitve controller (not directly to the directive).
source to share