Injecting directive into controller ends up with "[$injector:unpr] Unknown provider" error

Question

Here is my controller:

(function () {
    'use strict';

    angular
        .module('app.dashboard', [ 'app.services.dashboardService', 'app.dashboard.eventTableDirective'])
        .controller('DashboardController', DashboardController);

    DashboardController.$inject = ['dashboardService', '$log', 'eventTableDirective'];

    function DashboardController(dashboardService, $log) {
        //.....
    }
}());

and my directive:

(function () {
    'use strict';

    angular
        .module('app.dashboard.eventTableDirective', [])
        .directive('eventTableDirective', eventTableDirective);

    function eventTableDirective() {
        var directive = {
            link: link,
            templateUrl: 'eventTable.directive.html',
            restrict: 'EA'
        };
        return directive;

        function link(scope, element, attrs) {
            /* */
        }
    }

}());

While completely same logic works with dashboardService, it fails with eventTableDirective and leads to this kind of error:

Error: [$injector:unpr] Unknown provider: eventTableDirectiveProvider <- eventTableDirective <- DashboardController

The obvious first place would be did you include it in your index.html? — Brant, Jul 21 '15 at 16:40
Yes sure everything is included, I checked it multiple times. — Shota, Jul 21 '15 at 16:42
I think if the file wasn't included it would throw a `modulerr` (module not found). Right? — Isaac Lyman, Jul 21 '15 at 16:47
Create a plunkr and show us the problem. Also I think the directive (if it's in a separate file) needs to be included before the controller — sirrocco, Jul 21 '15 at 16:47
I think you need to include your directive file path in the controller. — jrath, Jul 21 '15 at 16:51

score 1 · Accepted Answer · edited May 23 '17 at 11:51

You can inject a directive by adding a suffix "Directive" to the name, so in your case it would be somewhat unfortunately named eventTableDirectiveDirective:

.controller("FooCtrl", function(eventTableDirectiveDirective){

})

But, WHY?! would you want to inject a directive into a controller at all? Perhaps I am lacking in vision, but I cannot imagine a scenario where this would be needed. Directives are explicitly View elements - they live (and die) in the DOM. Controllers should not make any assumptions about the View, including HTML, styles, directives, etc...

I suggest you read “Thinking in AngularJS” if I have a jQuery background? to get the gist of what I am saying. In fact, I hope you do read it, because otherwise I have given you a gun that you would shoot yourself in the foot with.

Now I feel extremely stupid, I wonder why I was trying to inject directive in controller at all, thanks for your answer. — Shota, Jul 21 '15 at 18:22
@Shota, I always welcome an opportunity to feel stupid - that's how one learns — New Dev, Jul 21 '15 at 18:26

Injecting directive into controller ends up with "[$injector:unpr] Unknown provider" error

1 Answers1