javascript - 自定义 AngularJS 指令的部分内容应该保存在哪里？

Question

我正在尝试创建一个自定义 Angular 指令，该指令使用 KineticJS 根据范围内的值在 Canvas 上进行绘制。我打算创建一个服务，然后根据接收 JSON 响应的 $http 调用来更新范围。此时，我希望指令循环遍历范围中的值并为每个值创建一个动力学节点。

但是，我不确定是否应该在 Controller 内或指令的链接函数内执行此操作。如果我要在链接函数内进行更新，我会使用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
        };
});

Controller 看起来像这样:

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);
}

如有任何帮助，我们将不胜感激!

Answer 1

参见Difference between the 'controller', 'link' and 'compile' functions when defining a directive

总之，指令的 Controller 和链接函数之间几乎没有什么区别。 Controller 将首先运行，如果这很重要，但我不认为它在这里运行 - 因为您是通过 $http 检索数据，所以您必须在 Controller 或链接函数中使用 $watch 以便在以下情况下触发您的逻辑:数据可用。