Question

我正在尝试构建一个AngularJS指令，该指令在链接阶段将其子节点（也是指令）移动到子节点进入链接阶段之前的另一个位置。使用transclution很容易实现孩子的移动，但是，即使我没有立即将子元素放回DOM中，他们仍然可以编译和链接。

我为此构建的用例是一个图像库指令，用于管理其图像的加载，以便具有大量图像的图库仅加载实际渲染所需的图像。＆＃39;图像＆＃39;，即图库的子指令，在链接阶段设置图像src。遗憾的是，图片指令无法轻易修改，因为它在整个网站的其他部分使用得非常多。

我在这里可以看到用例的通用原型：

http://jsfiddle.net/vmJKK/1/

var app = angular.module('myApp', []);

app.directive('parent', function ($timeout) {
    return {
        restrict: 'E',
        transclude: true,
        template: '<div><ol><li ng-repeat="log in logs track by $index">{{log}}</li></ol><hr></div>',
        link: function ($scope, $element, $attrs, ctrl, $transclude) {
            var _children = [];

            $scope.logs = [];

            $transclude(function (clones) {
                $scope.logs.push('Transcluding');
                angular.forEach(clones, function (clone) {
                    if (clone.nodeName !== '#text') {
                        _children.push(clone);
                    }
                });
            });

            $timeout(function () {
                angular.forEach(_children, function (child) {
                    $scope.logs.push('Appending child');
                    $element.append(child);
                });
            }, 2000);
        }
    };
});

app.directive('child', function () {
    return {
        restrict: 'E',
        template: 'I am a child!',
        link: function ($scope, $element, $attrs) {
            $scope.$parent.logs.push('Linking child');
        }
    };
});

原型执行的当前输出是：

 1. Transcluding
 2. Linking child
 3. Linking child
 4. Appending child
 5. Appending child

我想要的是：

 1. Transcluding
 2. Appending child
 3. Linking child
 4. Appending child
 5. Linking child

......或者类似的东西，在孩子被追加之前，孩子的联系不会发生。

Answer 1

您应该能够更改子指令而不破坏与此类似的代码的功能：

link: function ($scope, $element, $attrs) {
    function link() {
        $scope.$parent.logs.push('Linking child');
    }
    if (angular.isDefined($attrs.defer)) {
        $element[0].link = link;
    } else {
        link();
    }
}

这个想法是将当前链接函数包装在函数中，该函数可以立即调用，也可以作为无参数link()函数附加到DOM节点，并从父指令的append函数调用（如果提供了defer属性）。我希望你的情况可以接受。

代码在这里：http://jsfiddle.net/vmJKK/5/

顺便说一句，到目前为止，我从未见过这种质量的问题。完美。

推迟从父代编译或链接子指令

1 个答案: