AngularJS中的Directive實現消極式載入_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> 

以上，
● delay-bind表示要從資料來源中取出的某個欄位值
● attribute表是html元素屬性，對該屬性延遲賦值
● trigger表示通過那個事件來觸發消極式載入

Directive代碼大致如下：

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

以上，compile方法中用到了$interpolate服務，$interpolate這個服務首先可以通過$interpolate(tAttrs.delayBind)把資料來源某個欄位的屬性值先編譯緩衝起來，在post-link,也就是這裡的post函數中，當觸發引起消極式載入的事件，再讓$interpolate服務開始編譯把值賦值給html元素的某個屬性。

以上所述是針對AngularJS中的Directive實現消極式載入的相關內容，希望對大家有所協助。