javascript - 在嵌套指令方案中传递来自内部指令(内部模板)的属性

参考以下代码片段：

Plunker Demo 1
运行正常，我进行了以下更改：

的HTML

<!DOCTYPE html>
<html ng-app="MultiplicationApp">

  <head>
    <link rel="stylesheet" href="multiplication-app.css">

  </head>

  <body ng-init="data='x'">
<div multiplication-table x="5" y="5">
  {{ multiplication.value }}
</div>
<script type="text/javascript" src="//code.angularjs.org/1.3.6/angular.js"></script>
<script src="multiplication-app.js"></script>
  </body>

</html>

乘法app.js

var ngModule = angular.module('MultiplicationApp', [])

ngModule.directive('multiplicationTable', [function() {
  return {
    templateUrl : 'multiplication-table-tpl.html',
    controllerAs : 'ctrl',
    transclude: true,
    bindToController: true,
    scope: {
      x : '=',
      y : '='
    },
    controller : function() {
      var x = this.x || 0;
      var y = this.y || 0;

      var table = this.rows = [];
      for(var i=0;i<y;i++) {
        var array = table[i] = [];
        for(var j=0;j<x;j++) {
          array.push(1);
        }
      }
    }
  }
}]);

ngModule.directive('multiplicationCell', [function() {
  return {
    controllerAs : 'multiplication',
    bindToController: true,
    scope: {
      x : '=',
      y : '='
    },
    controller : function() {
      var x = this.x || 0; //why does this does not resolve the x="$index+1" attribute in the directive.
      var y = this.y || 0; //why does this does not resolve the y="$parent.$index+1" attribute in the directive.

      this.value = x * y;
      // console.log(this);
    }
  };
}]);

multiplication-table.tpl.html

<div ng-repeat="row in ctrl.rows track by $index">
  <div ng-repeat="cell in row track by $index">
    <div multiplication-cell
         x="$index+1"
         y="$parent.$index+1"
         ng-transclude>
    </div>
  </div>
</div>

我无法理解为什么我无法从内部嵌套标签内的multiplication.value控制器访问multiplication。

我创建了这个小品来演示这一点。

Plunker Demo 2

我正在寻找以下问题的答案：

为什么第二个Plunk不能按预期工作？
如何使用最少的更改使第二个插件工作。并且此解决方案不应与第一个柱塞相同。

注意：multiplicationCell实现类似于multiplicationTable，但仍然无法正常工作。

最佳答案

基本上，为multiplication创建一个模板，其中包含我们要包含的值。

controllerAs : 'multiplication',
templateUrl: 'multiplication.tpl.html',
bindToController: true,
scope: {
  x : '=',
  y : '='
},
controller : function() {
  var x = this.x || 0;
  var y = this.y || 0;

  this.value = x * y;
  // console.log(this);
}
}]);

为了访问乘法值，您需要将值传递给它自己的模板，因此我为子“ multiplication.tpl.html”创建了模板，并且您需要实现。

multiplication.tpl.html

{{ multiplication.value }}

找到您的答案的柱塞：http://plnkr.co/edit/glssXrvbVpP2UjDgu3Ed?p=preview

我希望这种解释能消除您的怀疑。

谢谢与欢呼！