question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Not able to annotate directive controller dependency injections

See original GitHub issue
(function() {
    'use strict';

    angular
        .module('app.widgets')
        .directive('directiveName', directiveName);

    function directiveName(someService) { //This is working
        return {
            controller: function(anotherService) { //No annotations generated for this one
        }
     }
   }

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
dave-newsoncommented, Jan 20, 2017

Just to necro this issue again, I’m here also because of this slight discrepancy between ng-annotate behaviour and the John Papa style guide, too.

Because I wasted 45 minutes on this, here’s a recap for anyone else (and google):

The Angular exception raised takes this form:

Error: [$injector:unpr] Unknown provider: iProvider <- i

Because the minifier has minified the arguments on the Controller function, but ng-annotate couldn’t identify the Directive’s controller as a controller and thus failed to generate the $inject call.

The difference, as pointed out by @olov, is in returning the directive definition rather than setting it on an object and then returning:

Does Not Work

        var directive = {
            restrict: 'EA',
            controller: MyDirectiveController,
        };
        return directive;

        function MyDirectiveController($scope) {
            $scope.someVar = "Hello World";
        }

Does Work

        return {
            restrict: 'EA',
            controller: MyDirectiveController,
        };

        function MyDirectiveController($scope) {
            $scope.someVar = "Hello World";
        }

It’s a minor annoyance with a simple workaround, but as the Angular errors for minified controller arguments are so completely useless (and this is why we use ng-annotate) it’s quite the time waster when you bump into it.

Citing @bartvanderwal comment about John Papa’s guide being endorsed by the Angular team, it would be great if something could be done to support this in the future.

This was confirmed using gulp-ng-annotate 2.0.0 with ng-annotate 1.2.1 under the hood.

2reactions
levin81commented, Sep 16, 2015

Thanks, I changed it and it worked. Could this be supported? As this form is recommended both in https://github.com/johnpapa/angular-styleguide#directives and in https://docs.angularjs.org/api/ng/service/$compile

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to inject dependencies in directive controller in following ...
Try separating the directive and it's controller into two separate files. Then you can do injection like you normally would, in the controller....
Read more >
Developer Guide: Dependency Injection - AngularJS: API
Dependency Annotation. AngularJS invokes certain functions (like service factories and controllers) via the injector. You need to annotate these functions so ...
Read more >
Avoid AngularJS Dependency Annotation with Rails
In AngularJS, it is a common practice to annotate injected dependencies for controllers, services, directives, etc. For example:.
Read more >
Use explicit dependency injection annotation in directives with ...
Bad practice (no explicit annotation used for injecting dependencies into a directive used in an application bootstrapped in strict DI mode). angular
Read more >
Directive Controllers Can Use Dependency Injection In ...
Yeah, if the injected values need to be exposed to the Link and/or Compile functions (or any other function inside the directive factory)....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found