La directive dans AngularJS implémente le chargement paresseux_AngularJS

Le chargement dit paresseux signifie généralement le chargement jusqu'à l'interaction de l'utilisateur. Comment implémenter le chargement paresseux ?

Trois aspects doivent être clarifiés :

1. Quel attribut de l'élément html nécessite un chargement paresseux ?
2. Quel champ de la source de données doit être chargé paresseux ?
3. Quels événements déclenchent un chargement différé ?

Les performances de la page de la directive personnalisée sont à peu près les suivantes :

<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> 

Ci-dessus,
● delay-bind représente une valeur de champ à retirer de la source de données
● La table attributaire est l'attribut de l'élément HTML, et l'attribut se voit attribuer une valeur retardée
● Déclencher signifie déclencher un chargement paresseux via cet événement

Le code de la directive est à peu près le suivant :

//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);
}()); 

Ci-dessus, le service $interpolate est utilisé dans la méthode de compilation. Le service $interpolate peut d'abord compiler et mettre en cache la valeur d'attribut d'un champ dans la source de données via $interpolate(tAttrs.delayBind), en post-lien, ce qui est ici Dans la fonction post, lorsque l'événement qui provoque un chargement retardé est déclenché, le service $interpolate commence à compiler et à attribuer la valeur à un attribut de l'élément html.

Ce qui précède est lié à l'implémentation du chargement paresseux pour Directive dans AngularJS. J'espère que cela sera utile à tout le monde.