Directive - Dependency Injection do not resolve (controllerAs syntax)

Question

I am Trying to follow the rules on https://github.com/johnpapa/angular-styleguide#style-y075 , and i am trying to inject the dependencies, and unfortunatly, it fails on GetDiscussionThreadListService

HTML :

<discussion-parent someParam></discussion-parent>

JS :

  var xDiscussionsDirectives = angular.module('xxx.discussions.parent', ['ngResource']).directive('discussionParent', discussionParrentDirective);

function discussionParrentDirective() {
  var directive = {
      restrict: 'E',
      scope: {
        discussionType: '@docDiscussionType',
    },
    templateUrl: 'modules/discussions/views/ParentDiscussionTemplate.aspx',
    replace: false,
    controller: discussionParrentDirectiveController,
    //controllerAs: 'vm',
    bindToController: true
    };
    return directive; 
}


discussionParrentDirectiveController.$inject = ['$scope', '$route', '$routeParams', '$location', '$filter', '$interval', '$modal', '$timeout', 'GetDiscussionThreadListService'];


function discussionParrentDirectiveController($scope, $element, $attrs) {
    GetDiscussionThreadListService.get({
            //some params
        }, function (data) {
}
   }

ReferenceError: GetDiscussionThreadListService is not defined (xxx.discussions.parrent.js:278)

sebastienbarbier · Accepted Answer · 2015-04-20 12:12:30Z

1

To solve your problem you need to declare this module in your function arguments list like this :

    discussionParrentDirectiveController.$inject = ['$scope', '$route', '$routeParams', '$location', '$filter', '$interval', '$modal', '$timeout', 'GetDiscussionThreadListService'];

    function discussionParrentDirectiveController($scope, $route, $routeParams, $location, $filter, $interval, $modal, $timeout, GetDiscussionThreadListService) {
        GetDiscussionThreadListService.get({
                //some params
            }, function (data) {
    }

This way your variable GetDiscussionThreadListService will be define in your scope.

One alternative is to import is as first to avoid all those useless module (which are injected by the way).

    discussionParrentDirectiveController.$inject = ['$scope', '$route', '$routeParams', 'GetDiscussionThreadListService', '$location', '$filter', '$interval', '$modal', '$timeout'];

    function discussionParrentDirectiveController($scope, $route, $routeParams, GetDiscussionThreadListService) {
        GetDiscussionThreadListService.get({
                //some params
            }, function (data) {
    }

I also use this styleguide it is a great one, continue with it because totally think it worth it.

answered Apr 20, 2015 at 12:12

sebastienbarbier

6,8624 gold badges34 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lightning3 Over a year ago

good point, it was the same in style guide, but with comment "// Injecting $scope just for comparison" so i was a bit confused about that

dco · Accepted Answer · 2015-04-20 12:12:07Z

1

discussionParrentDirectiveController.$inject = ['$scope', '$route', '$routeParams', '$location', '$filter', '$interval', '$modal', '$timeout', 'GetDiscussionThreadListService']

And

function discussionParrentDirectiveController($scope, $element, $attrs)

need to match

the $inject purpose is to handle issues like the minimization of javascript, so the module names need to match. In your function you need to have the same parameters.

function discussionParrentDirectiveController($scope, $route, $routeParams, $location, $filter, $interval, $modal, $timeout, GetDiscussionThreadListService)

answered Apr 20, 2015 at 12:12

dco

3271 silver badge13 bronze badges

Collectives™ on Stack Overflow

Directive - Dependency Injection do not resolve (controllerAs syntax)

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related