在控制器的变量更改上更新指令的模板 - angularjs答案

【问题标题】：Update directive's template on controller's variable change - angularjs在控制器的变量更改上更新指令的模板 - angularjs
【发布时间】：2014-09-01 10:33:57
【问题描述】：

我要做的是从 $http 请求中获取 JSON 对象，在控制器内部请求，并构建一个指令，在网格中显示 JSON 对象中的多个对象。

问题是当对象到达时，我必须在指令的控制器中处理它才能在模板中使用它，因此，当 JSON 对象发生变化时，它不会反映在模板中。如何让指令知道对象的变化并强制它重新加载模板？

// The Directive code
amobile.directive('grid', function() {
return {
    restrict: 'E',
    scope: {
        break: '=break',
        source: '=source'
    },
    controller: function($scope) {
        var source = $scope.source;
        $scope.final_data = new Array(source.length);
        if(source){
            for(var j=0; j < source.length; ++j){
                var total = Math.ceil(source[j]['Division'].length / $scope.break);
                var data = new Array(total);
                for (var i = 0; i < total; ++i) {
                    data[i] = source[j]['Division'].slice(i * $scope.break, (i + 1) * $scope.break);
                }
                $scope.final_data[j] = data;
            }
        }

    },
    templateUrl:'directives/grid.tpl.html',
    replace: true
};
});

//The template
<div ng-repeat="data in final_data">
<div layout="vertical" layout-sm="horizontal" layout-padding class="" ng-repeat="row in data">
    <div class="" ng-repeat="item in row">
        <div flex style="width:100px">
            {{item.name}}
        </div>
    </div>
</div>

//index.html
<div ng-controller="DivisionsCtrl as div">
    <material-button ng-click="div.go()" class="material-theme-red">Button</material-button>
<div ng-if="div.data.floors">
  <gridy break="3" source="div.data.floors"/>
</div>

【问题讨论】：

标签： json angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

【解决方案1】：

最简单的解决方案是使用手表

controller: function($scope) {
    processData = function () {
      var source = $scope.source;
      $scope.final_data = new Array(source.length);
      if(source){
        for(var j=0; j < source.length; ++j){
            var total = Math.ceil(source[j]['Division'].length / $scope.break);
            var data = new Array(total);
            for (var i = 0; i < total; ++i) {
                data[i] = source[j]['Division'].slice(i * $scope.break, (i + 1) * $scope.break);
            }
            $scope.final_data[j] = data;
        }
      }
    }
  $scope.$watch('div.data.floors', processData, true)

},

【讨论】：

代码本身不起作用。当我更改对象并按下按钮更新视图时，我可以（通过 Firebug）接收新对象，但视图不会更新。