AngularJS nvd3-line-chart 指令不重绘数据更改（非实时）答案

【问题标题】：AngularJS nvd3-line-chart directive not redrawing on data change (not real time)AngularJS nvd3-line-chart 指令不重绘数据更改（非实时）
【发布时间】：2015-02-27 21:10:01
【问题描述】：

尝试在我的 AngularJS 应用程序中使用 nvd3-line-chart 指令，但它不会在更改底层模型时重绘...

我是 AngularJS 的新手，所以对于经验丰富的 Angular 程序员来说可能是显而易见的事情，但让我抓狂:-)

在 stackoverflow 上搜索类似问题只会找到处理更复杂问题（如实时图表等）的答案 - 但我只想在点击链接时推送新数据...

我在这里准备了一个 Plunker 示例：

http://plnkr.co/edit/TkyHhbfi0vNw1FJ6mYZC?p=preview

指令是这样使用的：

<nvd3-line-chart data="exampleData" showXAxis="true" showYAxis="true"
  tooltips="true" xAxisTickValues="xAxisTicks()"
  xAxisTickFormat="xAxisTickFormat()"
  yAxisTickFormat="yAxisTickFormat()" interactive="true" objectEquality="true">
</nvd3-line-chart>

（也尝试使用 objectEquality=false，但行为没有改变）...

然后在我的 js 代码中，我在子函数中设置新内容（来自 http 传输的回调）：

$scope.exampleData = data;

为确保所有内容都按需要调用，还添加了一些标签 (xxx) 并在函数调用中从 click 修改为 yyy，这样可以正常工作 - 所以数据绑定和范围可用性似乎没问题？

同样的函数也用于初始填充，效果很好……

谁能解释一下这个问题？

顺便说一句；还找到了一个工作示例，但无法发现差异（除了他们从本机 js 调用它，因此他们需要手动更新对我不起作用的组件，因为我已经处于角度更新周期中）：

http://plnkr.co/edit/4ORCLW?p=preview

【问题讨论】：

我感受到了你的痛苦——我正在尝试用迷你图实现类似的目标。设置 objectEquality 没有区别。也不会设置调用 $scope.$apply 并更新绑定数据以匹配新数据的间隔。我还尝试按照名为 refresh.example.html 的插件文件夹中的示例进行操作，但它根本没有任何区别。该示例的有趣之处在于它更新了示例页面上的两个图表，即使您删除了应该提供神奇更新的附加指令！如果有人有建议，我很乐意听到！

标签： javascript angularjs plunker angularjs-nvd3-directives

【解决方案1】：

问题是您创建了控制器 ExampleCtrl 的两个实例：

<div ng-controller="ExampleCtrl">
    <nvd3-line-chart data="exampleData" showXAxis="true" showYAxis="true"
        tooltips="true" xAxisTickValues="xAxisTicks()"
        xAxisTickFormat="xAxisTickFormat()"
        yAxisTickFormat="yAxisTickFormat()" interactive="true" objectEquality="true">
    </nvd3-line-chart>
</div>
<div ng-controller="ExampleCtrl">
    <div ng-click="doClick()">{{mylabel}}</div>
</div>

这意味着您创建了两个不同的范围，当单击按钮时，未附加到图表的范围是其数据已刷新因此未传播到图表的范围。

相反，您需要这样的东西（将可点击的 div 更改为按钮，只是为了 UI 可发现性）：

<div ng-controller="ExampleCtrl">
    <nvd3-line-chart data="exampleData" showXAxis="true" showYAxis="true"
        tooltips="true" xAxisTickValues="xAxisTicks()"
        xAxisTickFormat="xAxisTickFormat()"
        yAxisTickFormat="yAxisTickFormat()" interactive="true" objectEquality="true">
    </nvd3-line-chart>
    <button ng-click="doClick()">{{mylabel}}</button>
</div>

这里是http://plnkr.co/edit/b6ZhMqEU84vEctkOPqQh?p=preview

【讨论】：