AngularJS의 지시문은 지연 로딩을 구현합니다_AngularJS

소위 지연 로딩은 일반적으로 사용자 상호작용까지 로딩을 의미합니다. 지연 로딩을 구현하는 방법은 무엇입니까?

세 가지 측면을 명확히 해야 합니다.

1. html 요소 중 지연 로딩이 필요한 속성은 무엇인가요?
2. 데이터 소스의 어떤 필드를 지연 로드해야 합니까?
3. 지연 로딩을 유발하는 이벤트는 무엇입니까?

맞춤형 Directive의 페이지 성능은 대략 다음과 같습니다.

<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 서비스는 먼저 post-link에서 $interpolate(tAttrs.delayBind)를 통해 데이터 소스의 필드 속성 값을 컴파일하고 캐시할 수 있습니다. post 함수에서 로딩 지연을 유발하는 이벤트가 발생하면 $interpolate 서비스가 컴파일을 시작하고 해당 값을 html 요소의 속성에 할당합니다.

위 내용은 AngularJS의 Directive에 대한 지연 로딩 구현과 관련이 있습니다. 모두에게 도움이 되기를 바랍니다.