AngularJS nvd3 строки-диаграмма директивы не перерисовки на изменении данных (не в режиме реального времени)

Question

Попытки использовать директиву nvd3-линию диаграммы в моем AngularJS приложении, но это не перерисовывать на изменение базовой модели ...

Я новичок в AngularJS, так что может быть что-то очевидное для опытного программиста с угловыми углами, но меня заводит :-)

Поиск похожих вопросов в 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 = ложным, но поведение не меняется) ...

Тогда в моем js code Я установил новый контент в подфункции (обратный вызов из http-передачи) с:

$scope.exampleData = data; 

Чтобы убедиться, что все получилось вызвано как нужно, также добавил некоторую метку (xxx) и изменил ее в вызове функции с щелчка на yyy, который работает - так что привязка данных и доступность видимости выглядят нормально?

Та же функция также используется для первоначального заполнения, который прекрасно работает ...

Может кто-нибудь пролить некоторый свет по этому вопросу?

BTW; также нашел рабочий пример, но не смог определить разницу (кроме того, что они вызывали его из native js, поэтому им необходимо вручную обновить компонент, который не работал для меня, поскольку я уже в цикле циклического обновления):

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

Answer 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 на кнопку только для пользовательского интерфейса понятности):

<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