Directive implementation delay loading in ANGULARJS _angularjs

The so-called deferred loading is usually not loaded until the user interacts. How do I implement deferred loading?

There are three areas that need to be figured out:

1. Which attribute of the HTML element needs to be deferred loading?
2. Which field of the data source needs to be deferred loading?
3, through what event to trigger the delay loading?

The custom directive page behaves roughly like this:

<ul>
<li ng-repeat= "Cust in Customers"
delay-bind= "{{:: Cust.street}}"
attribute= "title"
Trigger= "MouseEnter" >
<a delay-bind= "{{:: Cust.url}}"
attribute= "href"
trigger= "MouseEnter" >
{cust.name}}
</a>
</li>
</ul>

Above
Delay-bind represents a field value to be fetched from the data source
Attribute table is an HTML element property, deferred assignment to this property
Trigger means that the event triggers a deferred load.

The directive code is roughly as follows:

The presence of the

//interpolate allows one-time one-time binding (function () {var delaybindwithcompile = [' $interpolate ' , function ($interpolate) {var compile = fucntion (TElem, tattrs) {//delay-bind= ' {{:: Cust.street}}} '//This returns a functions,
is equivalent to the Street property of the beginning of the compilation, the equivalent of the compile function first cached here var Interpolatefunc = $interpolate (Tattrs.delaybind); Reset the property value of the Delaybind, when the DOM is not loaded tattrs. $set (' delaybind ', null); Equivalent to clear property value return {pre:function (scope, Elem, attrs) {}, Post:function (scope, Elem, attrs) {//trigger= "MouseEnter" Elem. On (Attrs.trigger, function (event) {//attribute= "title" Here title is the attribute that really wants to delay the update var attr = Atts.attribute, val = Interpolatefunc (scope);
Compiles the true execution if (attr &&!elem.attr (attr)) {elem.attr (attr, Val);}});
}
}
};
Return {restrict: ' A ', Compile:compile}}];
Angular.module (' directivesmodule '). Directive (' Delaybind ', delaybindwithcompile); }()); 

Above, the $interpolate service is used in the Compile method, $interpolate the service can first compile and cache the property values of a field of a data source through $interpolate (Tattrs.delaybind). In Post-link, which is the post function here, when the event that caused the delay loading is triggered, the $interpolate service begins to compile the value assigned to an attribute of the HTML element.

The above mentioned is for ANGULARJS in the directive implementation of deferred loading related content, hope to be helpful to everyone.