ng在嵌套数据发生变化后重复不更新

ng-repeat not updating after change in nestled data

本文关键字：更新 变化 嵌套 数据 ng      更新时间：2023-09-26

我有一个指令，它使用d3.js绘制一些东西。我绘制的内容和是否绘制取决于我范围内的数据。我的问题是，我无法让它在更改后重新绘制内容，我尝试过带有$scope的变体$申请，到目前为止还没有成功。

HTML:

<body ng-app="App" ng-controller="Mainctrl">
  <div ng-repeat="val in data">
    <div draw="" value="{{val.avg}}">{{val.avg}}</div>
  </div>
</body>

JS:

var app = angular.module('App', []);
app.controller('Mainctrl', function ($scope, $timeout) {
  $scope.data = 
  [{avg: 0},
  {avg: 1}];
  $timeout(function (){
    var i = 1;
      for (key in $scope.data){
         $scope.data[key].avg = i++; 
      };
    }
    ,3000)
  });
  app.directive('draw', function() {
    return {
      scope: {
        value: "@"
    },
    link: function (scope, element, attrs){
      if (attrs.value != 0) {
      var svgContainer = d3.select(element[0]).append("svg").attr("width", 200).attr("height", 200);
      var circle = svgContainer.append("circle").attr("cx", 30).attr("cy", 30).attr("r", 20);
      }
    }
  }
 });

下面是一个问题重现的plunker：http://plnkr.co/edit/V62WngzpmsBWh6zSHCcM?

将指令更改为：

 app.directive('draw', function() {
    return {
       scope: {
       value: "=" //<---
    },
  link: function (scope, element, attrs){
     scope.$watch("value", function(val) {
        //draw stuff with val
     });
  }
}

}

你的html是：

<body ng-app="App" ng-controller="Mainctrl">
   <div ng-repeat="val in data">
     <div draw value="val.avg">{{val.avg}}</div>
  </div>
</body>

这是更新后的plunkr：http://plnkr.co/edit/pIN8iy77QY5n4THqIcLp?p=preview

相关文章：