Question

参考以下代码段：

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);
    }
  };
}]);

乘法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没有按预期工作？
如何使用最小的更改使第二个插件工作。此解决方案不应与第一个Plunker相同。

注意： multiplicationCell实施与multiplicationTable类似，但仍无效。

Answer 1

基本上，为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 }}

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

我希望这个解释清楚你的怀疑。

谢谢＆amp;干杯！

在嵌套指令场景中传递内部指令（内部模板）中的属性

1 个答案: