Question

所以，我试图深入角度潜入并遇到这个代码： http://plnkr.co/edit/oNlZ8oRUk327R7yZH5k3?p=preview

现在，它背后的想法是远离控制器并试图成为更多基于组件的指令。见这里： https://www.airpair.com/angularjs/posts/component-based-angularjs-directives

无论如何，有问题的代码是：

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

并且在templateUrl中有这样的：

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

所以，我的问题是 - “行”在哪里返回或填充？我看到一个空的数组赋值，但在那之外 - 我没有看到“this.rows”被填充或返回...好奇指令如何操作和填充该对象。

在指令返回范围内，我没有看到任何填充this.rows ... html如何得到它？

Answer 1

因为Angular没有观察到控制器的变化。这就是为什么你应该通过调用$scope.$evalAsync(function () { // here your changes that affect a view });

来通知他们

此外，您可以使用bind方法破解功能。结果：

$scope.$evalAsync(function () {
  // this is a controller context, this.x and this.y are defined
}.bind(this));

Answer 2

从这里的代码：

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

你保持数组“指针”指向 table [i] ，指向 this.rows [i] ;）这样你就可以在执行array.push（1）时改变this.rows。

从使用= binding绑定在元素上的指令“inputs”x和y，您可以在其中传递该信息。因为它是bindToController:true，所以x和y在this.x和this.y上可用，而不是scope.x和scope.y。

没有看到指令中的数据返回。它是如何访问的？

2 个答案: