为什么处理AngularJS模型的D3事件对绑定没有影响？

Question

考虑下面的Angular JS控制器（1.5.8）。该项目也使用WebCola 3.1.3和d3 3.4.11。

当我尝试从d3回调处理函数中更改我的$ scope的任何属性时，该绑定在呈现的HTML中不起作用。

我怎样才能弄清楚如何防止这种行为从D3，并让双向绑定正常流动？

<div ng-controller="MainController"> 
    <h2>{{balls[0].a}}</h2> 
    <button ng-click="foo()">Do it!</button> 
</div> 

angular.module('nua').controller('MainController', ['$scope'], function ($scope) { 

    $scope.balls = []; 

    $scope.onCircleClickHandler = function (data, index) { 

     $scope.balls[index].a = 2; 

     // The problem is here! 
     // Every function of d3 that change the value 
     // of any scope property takes no effect in binding 

     // No one of my tries to change the value of any 
     // property of $scope.balls to see the rendered result 
     // in the <h2> takes effect. 

     // The value of $scope.balls[index].a is really 
     // updated to "2", but the values of <h2> remains "1". 

     // The calling from D3 seems to prevent something that affects binding. 

    }; 

    $scope.foo = function() { 

     $scope.balls[1].d = 5; 

     // This works properly. 

     // If I call onCircleClickHandler and THEN call foo, 
     // then the binding takes effect and <h2> has now the 
     // "2" as innerHTML 

    }; 

    $scope.init = function() { 

     // var mycola = cola.d3adaptor() ... 

     // var svg = d3.select('id') ... 

     // var nodes = svg.selectAll('circle') ... 

     nodes.on('click', function (data, index) { 

      this.onCircleClickHandler(data, index); 

     }.bind($scope)) 

     $scope.balls = [ 
      {a:1, b:2, c:3}, 
      {d:4, e:5, f:6} 
     ]; 

    }; 


}); 

Answer 1

的原因是，当你从D3的事件更新值，角度还没有出现，知道的范围数据发生了变化，所以它需要调用的消化周期。

因此，它应该是这样的：

$scope.onCircleClickHandler = function (data, index) { 
     //this will notify angular that the scope value has changed. 
     $scope.$apply(function() { 
      $scope.balls[index].a = 2; 
     }); 

    };