Question

我正在寻找创建一个延迟的创建指令，这样我就可以简单地将它添加到一个类似的对象中，以便稍后可以创建它

<div delay-creation="1000">Theres lots of things in here </div>

这背后的原因是我的UI非常复杂，而且很多对象都是最初看不到的。我认为这是一种很好的可重用方法，可以延迟创建屏幕外对象，而不必一直搞乱自定义代码。

我最初认为我的新指令可以有条件地将ng-if="false"添加到$element，然后在一段时间后将值设置为true。不幸的是这seems far more complicated比我初想的那样。有没有更好的方法来做到这一点，或者任何人都可以帮我创建这个指令？

**编辑：基于Bens代码，现在可以使用**

export class DelayCreationDirective implements angular.IDirective {

    restrict = "A";

    public link: (scope: angular.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => void;

    constructor($timeout: angular.ITimeoutService) {

        DelayCreationDirective.prototype.link = ($scope: angular.IScope, $element: angular.IAugmentedJQuery, attrs: ng.IAttributes) => {

            var placeholder = angular.element(document.createComment("delayCreation placeholder"));

            $element.after(placeholder);
            $element.remove();

            $timeout(() => {
                $element.removeAttr("delay-creation");
                $element.attr("ng-if", $attrs["delayCreation"]);

                if (placeholder) {
                    placeholder.after($element);
                    placeholder.remove();
                }

                $compile($element)($scope);
            }, 1000);
        }
    }

    static factory(): ng.IDirectiveFactory {
        const directive = ($timeout: angular.ITimeoutService) => new DelayCreationDirective($timeout);

        directive.$inject = ["$timeout"];

        return directive;
    }
}

angular
    .module("app.directives")
    .directive("delayCreation", DelayCreationDirective.factory());

Answer 1

我认为使用ng-if对你没有帮助，因为Angular的ng-if DOM子树总是被编译，然后在需要时从DOM中删除。所以它需要时间.. 我们在过去实施了一个“lazy-ng-if”指令，以防止这种并发症，也许它可以在您的UC中使用？

https://github.com/ravello/lazy-ng-if

BTW，此功能被添加到Angular1.5以及AFAIK

Answer 2

添加兄弟指令的一种方法是延迟设置ng-if。

  <div  delay-expn="show1=true" delay-time="2000" ng-if="show1">
       This delayed 2 seconds
  </div>

指令：

app.directive("delayExpn", function($timeout) {
    return {
         //set priority higher than ng-if (600)
        priority: 1000,
        link: function linkFn(scope,elem,attrs) {
            $timeout(angular.noop, attrs.delayTime).then(function() {
                scope.$eval(attrs.delayExpn);
            });
        }
    };
});

通过将指令的优先级设置为高于ng-if指令，$timeout会在元素被ng-if替换之前启动。

DEMO on PLNKR

延迟创建指令

2 个答案: