0

私はD3とAngularで何かをしようとしていました. これがD3と関係があるかどうかはわかりませんが、試していたことをすべて再現できるように、そこに残しました..

これが私の問題を再現するプランクです。

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

私がやろうとしているのは、データ配列を作成し、そのデータに基づいて d3 svg 円のセットを作成することです。作成されたディレクティブは、このデータ配列を「監視」し、配列の縮小または拡大に基づいてさらに円を作成または削除する必要があります。ロジックはそこから従うのが非常に簡単だと思います。後で確実に行うために、$timeout を使用して配列に新しい値を追加しています。

4

1 に答える 1

1

まず、このコード: スコープ内のどこに<circles data="obj.dataArray"></circles>も定義していないため、間違っているようです。dataArrayobj

したがって、この：

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 に答える