延迟创建指令

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

顺便说一句，此功能已添加到 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

延迟创建指令

Delay creation directive

directive

angularjs

angular-ng-if