CODEWITHSUNDEEP
angularjsangularjs-directive
Lightning3
Lightning3

Reputation: 375

Directive - Dependency Injection do not resolve (controllerAs syntax)

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)

Upvotes: 0

Views: 466

Answers (2)

sebastienbarbier
sebastienbarbier

Reputation: 6832

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.

Upvotes: 1

dco
dco

Reputation: 327

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)

Upvotes: 1

Related Questions