Direktive in AngularJS implementiert Lazy Loading_AngularJS

Sogenanntes Lazy Loading bedeutet in der Regel das Laden bis zur Benutzerinteraktion. Wie implementiert man Lazy Loading?

Drei Aspekte müssen geklärt werden:

1. Welches Attribut des HTML-Elements erfordert Lazy Loading?
2. Welches Feld der Datenquelle muss verzögert geladen werden?
3. Welche Ereignisse lösen Lazy Loading aus?

Die Seitenleistung der angepassten Richtlinie ist ungefähr wie folgt:

<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>
<div>Total Cusotmers: {{::customers.length}}</div> 

Oben,
● Delay-Bind stellt einen Feldwert dar, der aus der Datenquelle entnommen werden soll
● Die Attributtabelle ist das HTML-Elementattribut, und dem Attribut wird ein verzögerter Wert
zugewiesen ● Auslöser bedeutet, dass das verzögerte Laden durch dieses Ereignis ausgelöst wird

Der Richtliniencode lautet ungefähr wie folgt:

//interpolate的存在允许one-time一次性绑定
(function(){
var delayBindWithCompile = ['$interpolate', function($interpolate){
var compile = fucntion(tElem, tAttrs){
//delay-bind="{{::cust.street}}"
//这里返回的是一个函数,也就相当于针对street属性的编译开始，相当于把编译的功能先缓存在这里
var interpolateFunc = $interpolate(tAttrs.delayBind);
//重新设置delayBind的属性值，这时候DOM还没有加载呢
tAttrs.$set('delayBind', null); //相当于清除属性值
return {
pre: function(scope, elem, attrs){
},
post: function(scope, elem, attrs){
//trigger="mouseenter"
elem.on(attrs.trigger, function(event){
//attribute="title" 这里title是表示真正要延迟更新的属性
var attr = atts.attribute,
val = interpolateFunc(scope); //编译真正执行
if(attr && !elem.attr(attr)){
elem.attr(attr, val);
}
});
}
}
};
return {
restrict: 'A',
compile: compile
}
}];
angular.module('directivesModule')
.directive('delayBind', delayBindWithCompile);
}()); 

Oben wird der $interpolate-Dienst in der Kompilierungsmethode verwendet. Der $interpolate-Dienst kann zunächst den Attributwert eines Felds in der Datenquelle über $interpolate(tAttrs.delayBind) im Post-Link kompilieren und zwischenspeichern ist hier Wenn in der Post-Funktion das Ereignis ausgelöst wird, das das verzögerte Laden verursacht, beginnt der $interpolate-Dienst mit der Kompilierung und weist den Wert einem Attribut des HTML-Elements zu.

Das Obige bezieht sich auf die Implementierung von Lazy Loading für die Direktive in AngularJS. Ich hoffe, es wird für alle hilfreich sein.