1

AngularJS アプリで nvd3-line-chart ディレクティブを使用しようとしていますが、基になるモデルを変更しても再描画されません...

私はAngularJSを初めて使用するので、経験豊富なAngularプログラマーにとっては明らかなことかもしれませんが、私を夢中にさせます:-)

スタックオーバーフローで同様の問題を検索すると、リアルタイムチャートなどのより洗練された問題を扱う答えしか見つかりませんでしたが、リンクをクリックすると新しいデータをプッシュしたいだけです...

ここにプランカーの例を用意しました：

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) を追加し、クリックから yyy への関数呼び出しでそれを変更しました。

同じ機能が初期塗りつぶしにも使用され、正常に機能します...

この問題に関して誰かが光を当てることができますか?

ところで; 動作する例も見つかりましたが、違いを見つけることはできません(ネイティブjsから呼び出していることを除けば、私はすでにAngular更新サイクルにあるため、機能しなかったコンポーネントを手動で更新する必要があります):

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

4

1 に答える 1

0

問題は、コントローラー ExampleCtrl の 2 つのインスタンスを作成したことです。

<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>

これは、2 つの異なるスコープを作成したことを意味します。ボタンをクリックすると、チャートに関連付けられていないスコープは、データが更新されたスコープであり、チャートに反映されませんでした。

代わりに、次のようなものが必要です (UI を見つけやすくするために、クリック可能な 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>

プランカーはこちらhttp://plnkr.co/edit/b6ZhMqEU84vEctkOPqQh?p=preview

于 2015-06-15T14:40:34.620 に答える