为什么在angularjs中找不到所需指令的控制器? [英] why can not the controller of the required directive be found in angularjs?

问题描述

我用angularjs写了两个指令，一个指令嵌入另一个指令中.

I wrote two directives in angularjs, one is embedded in the other one.

以下是指令的脚本:

module.directive('foo', [
   '$log', function($log) {
     return {
      restrict: 'E',
      replace: true,
      transclude: true,
      template: '<div id="test" ng-transclude></div>',
      controller: function($scope) {
        this.scope = $scope;
        return $scope.panes = [];
      },
      link: function(scope, element, attrs) {
        return $log.log('test1', scope.panes);
      }
    };
  }
]);

module.directive('bar', [
  '$log', function($log) {
    return {
      restrict: 'E',
      replace: true,
      transclude: true,
      require: '^?foo',
      controller: function($scope) {
        return this.x = 1;
      },
      template: '<div ng-transclude></div>',
      link: function(scope, element, attrs, fooCtrl) {
        return $log.log('test2', fooCtrl);
      }
    };
  }
]);

下面是一段html:

<foo ng-controller="IndexController">
      <bar></bar>
    </foo>

下面是通过chrome开发人员工具检查生成的元素

below is the element generated, inspected from the chrome developer tools

<div id="test" ng-transclude="" ng-controller="IndexController" class="ng-scope">
      <div ng-transclude="" class="ng-scope"></div>
    </div>

下面是chrome控制台的输出:

below is chrome console output:

test2 
Array[0]
length: 0
__proto__: Array[0]
 angular.js:5930
test1 
Array[0]
length: 0
__proto__: Array[0]  

问题: 子指令无法获取父指令的控制器，因此链接功能"bar"的第四个参数"fooCtrl"为空数组.我做错了什么事?

Question: The child directive can not get the parent directive's controller, so the fourth parameter "fooCtrl" for link function of "bar" is an empty array. what's the thing that I do it wrong?

更新并回答:

最后，我找到了产生奇怪结果的原因.这只是我犯的一个愚蠢的错误:

At last I found the reason that made the weird result. It's just a stupid mistake that I have made:

 // in directive "foo"
 controller: function($scope) {
    this.scope = $scope;
    // This line below is wrong. It is here 
    // because I transcompiled coffeescript to js.
    // return $scope.panes = [];
    // It should be like below:
    $scope.panes = []
    // I should have written .coffee like below
    // controller: ($scope) ->
    //     @scope = $scope
    //     $scope.panes = []
    //     return # prevent coffeescript returning the above expressions.
    //     # I should rather have added the above line
  }

更正错误后，我尝试并发现没有什么可以阻止使用控制器或在子指令中提供空内容.

After correcting the mistake, I tried and found there's nothing to prevent using controller or providing empty content in child directives.

推荐答案

AFAIK，子指令中不能包含控制器.

AFAIK, you cannot have a controller in the child directive.

演示: http://plnkr.co/edit/kv9udk4eB5B2y8SBLGQd?p=preview

app.directive('foo', [
   '$log', function($log) {
     return {
      restrict: 'E',
      replace: true,
      transclude: true,
      template: '<div id="test" ng-transclude></div>',
      controller: function($scope) {
        $scope.panes = ['Item1','Item2','Item3'] 
        return { 
          getPanes: function() { return $scope.panes; }
        };
      },
      link: function(scope, element, attrs, ctrl) {
        $log.log('test1', ctrl, ctrl.getPanes(), scope.panes);  
      }
    };
  }
]);

我删除了子控制器.

app.directive('bar', [
  '$log', function($log) {
    return {
      restrict: 'E',
      replace: true,
      transclude: true,
      require: '^?foo',
      template: '<div ng-transclude></div>',
      link: function(scope, element, attrs, ctrl) {
        scope.x = 1;
        $log.log('test2', ctrl, ctrl.getPanes(), scope.panes, scope.x);
      }
    };
  }
]);

这篇关于为什么在angularjs中找不到所需指令的控制器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！