AngularJS中的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> 

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