注意不要在具有隔離范圍的指令中觸發

Question

我正在嘗試使用D3和Angular做一些事情。 我不確定這完全與D3有關，但是已經將其留在那兒了，以便我可以重現我的所有嘗試。

這是一個重現我問題的小問題。

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

我正在嘗試做的是創建數據數組，並根據該數據生成一組d3 svg圓。 創建的指令應“監視”此數據數組，並根據數組的縮小或擴展來創建或刪除更多的圓。我認為從那里開始遵循的邏輯非常簡單。 為了確保以后可以執行此操作，我正在使用$ timeout將新值添加到數組中。

Answer 1

好吧，首先，這段代碼： <circles data="obj.dataArray"></circles>似乎是錯誤的，因為您沒有在范圍內的obj上的任何地方定義dataArray 。

所以這：

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