1

KineticJSを使用してスコープ内の値に基づいてキャンバスに描画するカスタムAngularディレクティブを作成しようとしています。JSON応答を受信する$http呼び出しに基づいてスコープを更新するサービスを作成するつもりです。その時点で、ディレクティブがスコープ内の値をループし、各値の動的ノードを作成するようにします。

ただし、これをコントローラー内で行うべきか、ディレクティブのリンク関数内で行うべきかはわかりません。リンク関数内で更新を行う場合、scope。$ watchまたは他の何かを実行しますか？

次のようなカスタムディレクティブを作成しました。

angular.module('history.directives', [])
    .directive('kinetic', function() {
        var kineticContainer = '<div id="container"></div>';
        return {
            restrict: 'E',
            compile:function (tElement, tAttrs, transclude) {
                tElement.html(kineticContainer);
            },
            controller: KineticCtrl
        };
});

コントローラは次のようになります。

function KineticCtrl($scope) {
    $scope.stage = new Kinetic.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight - $('.navbar').outerHeight()
    });

    $scope.drawNode = function(posx, posy) {
        var layer = new Kinetic.Layer();
        var group = new Kinetic.Group({
            x: posx,
            y: posy
        });

        var line = new Kinetic.Line({
            points: [0, 25, 500, 25],
            stroke: 'black',
            strokeWidth: 4
        });

        var text = new Kinetic.Text({
            text: 'www.google.com',
            fontSize: 18,
            fontFamily: 'FontAwesome',
            fill: '#555',
            width: 300
        });

        group.add(line);
        group.add(text);
        layer.add(group);
        $scope.stage.add(layer);
    };

    $scope.drawNode(200, 400);
    $scope.drawNode(800, 400);
    $scope.drawNode(400, 100);
}

どんな助けでもいただければ幸いです！

4

1 に答える 1

1

ディレクティブを定義するときの「コントローラー」、「リンク」、および「コンパイル」機能の違いを参照してください。

要約すると、ディレクティブのコントローラーとリンク関数の間にはほとんど違いはありません。それが重要な場合、コントローラーが最初に実行されますが、ここではそうではないと思います – $http を介してデータを取得しているため、コントローラーまたはリンク関数で $watch を使用して、データが利用可能になります。

于 2013-03-15T03:16:51.817 に答える