Arahan dalam AngularJS melaksanakan lazy loading_AngularJS

Apa yang dipanggil pemuatan malas biasanya bermaksud memuatkan sehingga interaksi pengguna. Bagaimana untuk melaksanakan pemuatan malas?

Tiga aspek perlu dijelaskan:

1. Atribut elemen html yang manakah memerlukan pemuatan malas?
2. Medan manakah sumber data yang perlu dimuatkan secara malas?
3. Apakah peristiwa yang mencetuskan pemuatan malas?

Prestasi halaman Arahan tersuai adalah kira-kira seperti berikut:

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

Di atas,
● delay-bind mewakili nilai medan yang akan dikeluarkan daripada sumber data
● Jadual atribut ialah atribut elemen html dan atribut diberikan nilai tertunda
● Pencetus bermaksud mencetuskan pemuatan malas melalui acara itu

Kod arahan adalah kira-kira seperti berikut:

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

Di atas, perkhidmatan $interpolate digunakan dalam kaedah kompilasi Perkhidmatan $interpolate boleh mula-mula menyusun dan menyimpan nilai atribut medan dalam sumber data melalui $interpolate(tAttrs.delayBind), dalam pautan selepas. berada di sini Dalam fungsi pos, apabila peristiwa yang menyebabkan pemuatan tertangguh dicetuskan, perkhidmatan $interpolate mula menyusun dan menetapkan nilai kepada atribut elemen html.

Perkara di atas berkaitan dengan melaksanakan pemuatan malas untuk Arahan dalam AngularJS, saya harap ia akan membantu semua orang.