Chris Chris - 1 month ago 19
AngularJS Question

Delay creation directive

I am looking to create a delayed creation directive such that I can simply add it to an object like so to allow it to be created some time later like so

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


The reason behind this is that my UI is quite complicated and lots of objects are rendered that arent initially seen. I see this as a nice reusable way to delay creation of off screen objects without having to mess about with custom code all the time.

I initially thought my new directive could conditionally adding
ng-if="false"
to the
$element
and then, after some time period, set the value to be
true
. Unfortunately this seems far more complicated than I first thought. Is there a better way to do this or can anyone help me in creating this directive?

** Edit: Based off of Bens code this now works **

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

I think that using ng-if won't help you because Angular's ng-if DOM sub-tree always gets complied, then removed from DOM if needed. So it takes the time anyway.. We implemented in the past a "lazy-ng-if" directive, to prevent that complication, maybe it can be used in your UC?

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

BTW, this capability was added to Angular1.5 as well AFAIK