0

我试图用 D3 和 Angular 做一些事情。我不确定这是否与 D3 有关，但我将它留在了那里，这样我就可以重现我正在尝试的所有内容..

这是一个重现我的问题的笨拙。

http://plnkr.co/edit/sxbKUmeb1B51t9eTtgwH?p=preview

我正在尝试做的是，创建数据数组并根据该数据生成一组 d3 svg 圆。创建的指令应该“监视”这个数据数组，并根据数组的缩小或扩展创建或删除更多的圆圈。我认为从那里开始逻辑很简单。为确保稍后执行此操作，我正在使用 $timeout 将新值添加到数组中。

4

1 回答 1

1

好吧，首先，这段代码： <circles data="obj.dataArray"></circles>似乎是错误的，因为您没有在范围内定义dataArray任何地方。obj

所以这：

function($scope,model,$timeout) {
    $scope.obj = {};
        model.data[0] = 20;
        model.data[1] = 30;
        model.data[2] = 40;
        model.data[3] = 50;

        $timeout(function(){

            model.data.push(Math.random()*100);
            console.log(model.data);
        },1000);
}

应该是这样的：

function($scope,model,$timeout) {
    $scope.model = model;
    $scope.model.data[0] = 20;
    $scope.model.data[1] = 30;
    $scope.model.data[2] = 40;
    $scope.model.data[3] = 50;

    $timeout(function(){
        $scope.model.data.push(Math.random()*100);
        console.log($scope.model.data);
    },1000);
}

这：<circles data="obj.dataArray"></circles>应该是<circles data="model"></circles>。

现在在您的指令中，您已经设置了这样的范围：

scope : {
    data : '&'
},

但这应该是：

scope : {
    data : '='
},

因为您想要对 data 属性表示的对象的引用。& 用于当属性包含您要执行的表达式时。

因此，通过这些更改，指令中的 scope.data 现在包含对“commonModel”的引用，因此指令不再需要请求“commonModel”。然后更改您的 $watch 以查看“data.length”以了解何时添加或删除项目。

像这样的东西：http: //plnkr.co/edit/sa9blROCm8FFhRQSEWii

于 2013-02-19T12:01:56.807 回答