Question

我正在尝试使用ng和d3进行一些图表处理，只是遇到了摘要周期警告的问题。

我有一个为我做图形的指令，我希望在我的复选框（绑定到相同数据）发生变化时过滤数据。

这是我正在使用的过滤器：

<div data-d3-line data-chart-data="vm.chartData | filter:{show:true}" data-data-updated="vm.dataUpdated"></div>

如果删除过滤器，则会发生绑定，没有错误。我敢肯定，这是一个简单的东西，我忽略了，但它是其中一个拉你的头发的时刻。

为了得到一只手，我把这个笨蛋放在一起： http://plnkr.co/edit/5QVOvNKw0AqEogihcdyO

P.S。我知道我正在使用这个dataUpdated手表的穷人。我原本是在观看vm.chartData，并认为这导致了错误。

Answer 1

过滤器不能与隔离范围的双向绑定=一起使用。

这是因为在双向绑定中，将监视表达式以进行身份更改。但每次计算表达式时，过滤器都会产生一个不同的（同一性）数组，因此摘要周期将进入循环。

要解决此问题，具体取决于您使用vm.chartData。

的方式

如果d3指令不需要更新并将chartData同步回父级。一种解决方案是不使用双向绑定并手动观察表达式。例如：

var directive = {
  scope: {
    data: '&chartData' // use & instead of = here
  },
  link: function link(scope, element, attrs) {
    scope.$watch('data()', function (newData) {
      Update(angular.copy(newData));
    }, true); // watch for equality, not identity (deep watch)
  }
};

或者，如果chartData的每个项目都不会更改，则可能正在使用$watchCollection就足够了。

scope.$watchCollection('data()', function (newData) {
  Update(angular.copy(newData));
});

示例Plunker： http://plnkr.co/edit/0xArS1VAbZCwOpo4VYrw?p=preview

希望这有帮助。

AngularJS Filter导致$ digest循环错误

1 个答案: