Question

我试图用D3和Angular做点什么。我不确定这与D3有什么关系，但已将它留在那里，所以我可以重现我正在尝试的所有......

这是一个重现我的问题的插件。

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

我尝试做的是，创建数据数组并根据该数据生成一组d3 svg圈。创建的指令应“观察”这个数据数组，并根据数据收缩或扩展创建或删除更多的圆圈。我认为逻辑从那里开始非常简单。为了确保我以后再这样做，我正在使用$ timeout在数组中添加一个新值。

Answer 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

注意不要在具有隔离范围的指令中触发

1 个答案: