AngularJS 数据绑定 - 监视周期未触发

Question

假设以下 JSFiddle：https://jsfiddle.net/pmgq00fm/1/

我希望我的 NVD3 图表实时更新，基于第 39 行的 setInterval() 更新指令绑定到的数据。以下是有关体系结构和代码的快速指示：

该指令在 ThisController 的范围内
使用指令中的“=”双向绑定数据
只要指令在 $watch 周期内检测到数据发生变化，就应该在图表上调用更新函数。
$watch 是深度监视，因此应该检测值的变化
在指令中设置了一个时间间隔以在控制台中打印值的变化。每当调用 updateFnc 时，控制器都会打印更新后的数组。
指令中的数据值 never 与控制器中的数据匹配，出于某种原因我忽略了。
控制器和指令中的值都被修改了。
指令中的 $watch 只在执行时调用
该代码基于 this tutorial 并遵守其中解释的数据绑定所需的所有步骤。

要调试，运行 JSFiddle 并打开控制台以查看对象和调试打印。

HTML:

<div id="stats-container" ng-app="myApp" ng-controller="ThisController">
    <div id="nvd3-test" nvd3-discrete-bar data="data.graph">       
</div>

JS:

myControllers.controller('ThisController', ['$scope', function ThisController($scope){
      $scope.data = { graph : [ ... ] };

      updateFnc = function(data){
        for(var i = 0; i < data[0].values.length ; i++){
          data[0].values[i].value = Math.random();
        }
        console.log(Date.now()/1000 + ": In Controller");
        console.log(data);
      };

      setInterval(function(){
        updateFnc($scope.data.graph);
      }, 1000);
 }]);

myServices.factory('NVD3Wrapper', ['NVD3S', 'D3S', '$q', '$rootScope', function NVD3Wrapper(nvd3s, d3s, $q, $rootScope){
  return {
    nvd3: nvd3s,
    d3: d3s,
    discreteBarChart : function(data, config){
        var $nvd3 = this.nvd3,
            $d3 = this.d3,
            $nvd3w = this, //In order to resolve the nvd3w in other scopes.
            d = $q.defer(); //Creating a promise because chart rendering is asynchronous
        $nvd3.addGraph(function() {
          ...
        });
        return {
          chart: function() { return d.promise; } //returns the chart once rendered.
        };
    },
    _onRenderEnd: function(d, chart){
      $rootScope.$apply(function() { d.resolve(chart); });
    },
  };
}]);

myDirectives.directive('nvd3DiscreteBar', ['NVD3Wrapper', function(nvd3w){
  return {
    restrict: 'EA',
    scope: {
      data: '=' // bi-directional data-binding
    },
    link: function(scope, element, attrs) {
      var chart,
          config = {
            target: element,
          };
      var wrapper = nvd3w.discreteBarChart(scope.data, config);
      wrapper.chart().then(function(chart){
        scope.$watch(function() { return scope.data; }, function(newValue, oldValue) {
          console.log(Date.now()/1000 + ": In Directive $watch");
          if (newValue)
              chart.update();
        }, true);
      });
      //For testing
      setInterval(function(){ console.log(Date.now()/1000 + ": In Directive"); console.log(scope.data); }, 1000);
    }
  };
}]);

如有任何帮助，我们将不胜感激！非常感谢！

编辑：新的 JSFiddle 和 Andrew Shirley 的回答：https://jsfiddle.net/pmgq00fm/3/

Answer 1

添加行

$scope.$apply()

更新函数。这是因为当 javascript 中的变量在公共 angular 函数之外更新时，angular 不知道更改，因此不会浪费任何精力来刷新 DOM。这会强制执行一个摘要循环，该循环应刷新您所看到的内容。

编辑：真正理解您实际使用 scope.apply 的原因非常重要，我觉得我没有很好地描述它。这是一篇比我的文章做得更好的文章。

http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

我指出这一点是因为你需要知道如果你在一个与 angular 紧密相关的函数中（例如由 ng-click 调用的东西），那么如果你尝试使用范围。 $apply 你会得到 javascript 错误，因为你已经处于摘要循环的中间。

AngularJS 数据绑定 - 监视周期未触发

AngularJS Data Binding - Watch cycle not triggering

javascript

angularjs

d3.js

nvd3.js