4

angularjs を使用して d3 円の位置を更新する単純なディレクティブを作成する際に問題が発生しています。

ここに例があります - http://jsfiddle.net/hKxmJ/3/

これはモデルです：

 app.controller('AppCtrl', function ($scope) {
   $scope.d = [5, 10, 70, 6, 40, 45, 80, 30, 25];
 });

この例で行うべきことは、入力ボックスの数値が変更されたときに、円の位置と入力の横のテキストの両方を更新できるようにすることです。現在、ディレクティブの初期ロード以外は何も機能しません。

アップデート

http://jsfiddle.net/hKxmJ/5/

スコープを次のように変更しました

app.controller('AppCtrl', function ($scope) {
  $scope.d = [{v: 5}, {v: 10}, {v: 70}, {v: 6}, {v: 40}, {v: 45}, {v: 80}, {v: 30}, {v: 25}];
});

テキストは更新されていますが、ディレクティブの監視はまだ更新されていません。

4

1 に答える 1

4

Google フォーラムでヘルプを見つけることができました - https://groups.google.com/forum/?fromgroups=#!topic/angular/NblckkSF6EM

オプションの objectEquality 引数をスコープに渡すことができることがわかりました (http://docs.angularjs.org/api/ng.$ro​​otScope.Scope)

objectEquality (optional) – {boolean=} – Compare object for equality rather than for reference.

これで時計機能が動作します。

 scope.$watch(attr.ghBind, function(value){
    vis.selectAll("circle").data(value)
       .attr("cy", function(d){return d.v;});
    }
 , true);

フィドルはここにあります：http://jsfiddle.net/hKxmJ/6/

アップデート

また、マウスを使用してデータポイントを更新することで、データの双方向バインディングを生成することもできました。重要なのは、マウスの位置を追跡し、逆関数を使用して項目の位置を更新してから、scope.$apply() を呼び出すことです。これはここで強調されています：

      .on('drag', function(d, i) {
        var sel = d3.select('.drag'),
          cy = sel.attr('cy');
        sel.attr('cy', parseInt(cy)+d3.event.dy); // Update mouse postion
        d.v = height-Math.round(cy);              // Calculate value using an inverse function
        scope.$apply();                           // Call scope.$apply()
        console.log(d,i,cy);
      })

フィドルはここにあります：http://jsfiddle.net/hKxmJ/7/

于 2012-11-02T22:07:01.350 に答える