Question

我正在使用AngularJS 1.2

我通过ng-model将数组传递给自定义指令。

数据在加载时在指令中，但是当主控制器中的模型发生更改时，指令中的模型不会更新。

这是我的控制器使用的相对部分。（不是指令控制器）ui.pct是一个百分比数组。

<dprogress ng-model="ui.pct"></dprogress>

这是指令： ``` angular.module（＆＃39; dprogress＆＃39;，[]） .directive（＆＃39; dprogress＆＃39;，function（）{

function makeChart(data) {
  var chart = d3.select('#chart')
    .append("div").attr("class", "chart")
    .selectAll('div')
    .data(data)
    .enter()
    .append("div")
    .style("width", function(d) { return d + "%"; })
    .text(function(d) { return d + "%"; });
}

return {
  restrict: 'E',
  scope: { data: "=ngModel" },
  template: '<div id="chart"></div>',
  link: function (scope, element, attrs) {
    makeChart(scope.data);
  }
};

}）; ```

我在链接中添加了scope.$watch('data')，但是当从指令外部更改数据时，它不会触发。

如何从外部更改指令中的数据？

Answer 1

您的数据可能是一个数组，您需要深入观察它。一个简单的手表将检查参考是否被更改没有内容。

link: function (scope, element, attrs) {
  makeChart(scope.data);
  scope.$watch('data', makeChart, true); // last arg is for deepwatch
}

Answer 2

当objectEquality == true时，watchExpression的不等式根据angular.equals函数确定。要保存对象的值以供以后比较，请使用angular.copy函数。因此，这意味着观看复杂的物体会对记忆和性能产生不利影响。

scope.$watch('data', yourCallback, true);

Angular指令，用ng-model检测变化

2 个答案: