AngularJS のディレクティブは遅延ローディング_AngularJS を実装します

いわゆる遅延読み込みとは、通常、ユーザーの操作が行われるまで読み込みを行うことを意味します。遅延読み込みを実装するにはどうすればよいですか?

次の 3 つの側面を明確にする必要があります:

1. 遅延読み込みが必要な HTML 要素の属性はどれですか?
2. データ ソースのどのフィールドを遅延ロードする必要がありますか?
3. 遅延読み込みをトリガーするイベントは何ですか?

カスタマイズされたディレクティブのページのパフォーマンスはおおよそ次のとおりです:

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

上、
●遅延バインドはデータソースから取り出されるフィールド値を表します
● 属性テーブルは html 要素の属性であり、その属性には遅延値が割り当てられます
● トリガーとは、そのイベントを通じて遅延読み込みをトリガーすることを意味します

ディレクティブコードはおおよそ次のとおりです:

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

上記では、$interpolate サービスがコンパイル メソッドで使用されています。$interpolate サービスは、まずリンク後の $interpolate(tAttrs.layBind) を通じて、データ ソース内のフィールドの属性値をコンパイルしてキャッシュします。 post 関数では、遅延読み込みを引き起こすイベントがトリガーされると、$interpolate サービスがコンパイルを開始し、値を html 要素の属性に割り当てます。

上記は AngularJS でのディレクティブの遅延読み込みの実装に関連しています。皆さんのお役に立てれば幸いです。