指令 - 依赖注入无法解析(controllerAs 语法) [英] Directive - Dependency Injection do not resolve (controllerAs syntax)

问题描述

我正在尝试遵守 https://github.com/johnpapa/上的规则angular-styleguide#style-y075 ，我正在尝试注入依赖项，不幸的是，它在 GetDiscussionThreadListService 上失败了

HTML:

JS:

 var xDiscussionsDirectives = angular.module('xxx.discussions.parent', ['ngResource']).directive('discussionParent', DiscussionParrentDirective);函数讨论ParrentDirective() {var 指令 = {限制:'E'，范围: {讨论类型:'@docDiscussionType'，},templateUrl: 'modules/discussions/views/ParentDiscussionTemplate.aspx',替换:假，控制器:讨论ParrentDirectiveController，//controllerAs: 'vm',绑定到控制器:真};返回指令；}DiscussionParrentDirectiveController.$inject = ['$scope', '$route', '$routeParams', '$location', '$filter', '$interval', '$modal', '$timeout', 'GetDiscussionThreadListService'];函数讨论ParrentDirectiveController($scope, $element, $attrs) {GetDiscussionThreadListService.get({//一些参数}, 函数(数据){}}

<块引用>

ReferenceError: GetDiscussionThreadListService 未定义(xxx.discussions.parrent.js:278)

解决方案

要解决您的问题，您需要在函数参数列表中像这样声明这个模块:

 DiscussionParrentDirectiveController.$inject = ['$scope', '$route', '$routeParams', '$location', '$filter', '$interval', '$modal', '$timeout', 'GetDiscussionThreadListService'];function DiscussionParrentDirectiveController($scope, $route, $routeParams, $location, $filter, $interval, $modal, $timeout, GetDiscussionThreadListService) {GetDiscussionThreadListService.get({//一些参数}, 函数(数据){}

这样您的变量 GetDiscussionThreadListService 将在您的范围内定义.

一种替代方法是先导入，以避免所有那些无用的模块(顺便注入).

 DiscussionParrentDirectiveController.$inject = ['$scope', '$route', '$routeParams', 'GetDiscussionThreadListService', '$location', '$filter', '$interval', '$modal', '$超时'];函数讨论ParrentDirectiveController($scope, $route, $routeParams, GetDiscussionThreadListService) {GetDiscussionThreadListService.get({//一些参数}, 函数(数据){}

我也使用这个样式指南，它很棒，继续使用它，因为完全认为它值得.

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屋！