1

尝试在我的 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

4

1 回答 1

0

问题是您创建了控制器 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>

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

于 2015-06-15T14:40:34.620 回答