Question

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

Answer 1

The problem is that you created two instances of your controller 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>

This means you've created two different scopes and when the button is clicked, the scope that's not attached to your chart is the one whose data was refreshed thus it was not propagated to the chart.

Instead you need something like this (changed your clickable div to a button just for UI discoverability):

<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 here http://plnkr.co/edit/b6ZhMqEU84vEctkOPqQh?p=preview

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

1 个答案: