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

//interpolate的存在允許one-time一次性綁定
(function(){
var delayBindWithCompile = ['$interpolate', function($interpolate){
var compile = fucntion(tElem, tAttrs){
//delay-bind="{{::cust.street}}"
//這里返回的是一個函數(shù),也就相當于針對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); //編譯真正執(zhí)行
if(attr && !elem.attr(attr)){
elem.attr(attr, val);
}
});
}
}
};
return {
restrict: 'A',
compile: compile
}
}];
angular.module('directivesModule')
.directive('delayBind', delayBindWithCompile);
}());