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)

回答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.

回答2:

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)

来源：https://stackoverflow.com/questions/29747428/directive-dependency-injection-do-not-resolve-controlleras-syntax

标签

angularjs

angularjs-directive