ng-repeat在更改后隐藏数据不更新

我有一个指令，使用d3.js绘制什么，如果我绘制它取决于我的范围内的数据。我的问题是，我无法在更改后重新绘制它，我已经尝试使用$ scope的变体。$ apply并且迄今尚未取得任何成功。ng-repeat在更改后隐藏数据不更新

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？

来源

2014-10-27 Fernet

attrs.value = 0将此更改为attrs.value！== 0;在js文件1中有2个其他javascript警告。for（key in $ scope.data）应该是for（var key in $ scope.data） – Sankara 2014-10-27 14:06:47

如果我将它更改为！==它将绘制圆圈0，I希望它为所有不为0的值绘制一个圆。 – Fernet 2014-10-27 14:10:43

改变你的指令：

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

来源

2014-10-27 14:14:54

谢谢！现在我有问题了，如果已经有另一个圈了，那么它会画另一个圈，但那是另一个问题:) – Fernet 2014-10-27 14:20:36

是的，您需要使用d3来更新数据或者只是清理并再次绘制 – 2014-10-27 14:21:53

ng-repeat在更改后隐藏数据不更新

回答

相关问题