指令 - 依赖注入不解决（controllerAs语法） [英] Directive - Dependency Injection do not resolve (controllerAs syntax)

问题描述

我试图遵循 https://github.com/johnpapa/规则角风格指南＃风格y075 ，我试图注入的依赖关系，并不幸的是，它GetDiscussionThreadListService失败

HTML

 ＆LT;讨论父母someParam＆GT;＆LT; /讨论亲＆GT;
 

JS：

  VAR xDiscussionsDirectives = angular.module（'xxx.discussions.parent'，['ngResource']）指令（discussionParent'，discussionParrentDirective）。功能discussionParrentDirective（）{
  var命令= {
      限制：'E'，
      范围： {
        discussionType：@docDiscussionType'，
    }，
    templateUrl：'模块/讨论/视图/ ParentDiscussionTemplate.aspx'，
    更换：假的，
    控制器：discussionParrentDirectiveController，
    // controllerAs：虚拟机，
    bindToController：真
    };
    返回指令;
}
discussionParrentDirectiveController。$注='$范围，$路线'，'$ routeParams'，'$的位置，$过滤器，$间隔，$模式，$超时'，'GetDiscussionThreadListService'] ;
功能discussionParrentDirectiveController（$范围，$元，$ ATTRS）{
    GetDiscussionThreadListService.get（{
            //有些PARAMS
        }，功能（数据）{
}
   }
 

  

的ReferenceError：GetDiscussionThreadListService没有定义
      （xxx.discussions.parrent.js：278）

解决方案

要解决你的问题，你需要在你的函数参数来声明这个模块列表如下：

  discussionParrentDirectiveController。$注='$范围，$路线'，'$ routeParams'，'$的位置，$过滤器，$间隔，$态，$超时'，'GetDiscussionThreadListService'];    功能discussionParrentDirectiveController（$范围，$路径，$ routeParams，$位置$过滤器，$区间，$模式，$超时，GetDiscussionThreadListService）{
        GetDiscussionThreadListService.get（{
                //有些PARAMS
            }，功能（数据）{
    }
 

这样你的变量 GetDiscussionThreadListService 将在你的范围界定的。

一种替代方法是导入作为第一个避免所有那些没用的模块（这是由注射的方式）。

  discussionParrentDirectiveController。$注='$范围，$路线'，'$ routeParams'，'GetDiscussionThreadListService'，'$的位置，$过滤器，$区间'，'$模式，$超时'];    功能discussionParrentDirectiveController（$范围，$路径，$ routeParams，GetDiscussionThreadListService）{
        GetDiscussionThreadListService.get（{
                //有些PARAMS
            }，功能（数据）{
    }
 

我也用这个风格指南是一个伟大的，继续使用它，因为完全认为这是值得的。

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)

解决方案

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.

这篇关于指令 - 依赖注入不解决（controllerAs语法）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！