曾经在一篇博客中介绍过directive的异步处理,那个时候还是用很low的方法,就是用timeout来设置一个延迟时间,但是后来想想,这个方法是真的龊.....
因为在真正的项目中,由于你的设备硬件,软件代码,网络延迟等等个方面因素,导致了真正的网页渲染的时间是很难把握的,而如果涉及到比较复杂的异步操作时,那么这个操作时完全不可行的.
那么问题来了,我们应该怎么做呢?
还是上原来的代码
angular.module('myApp').directive('testDemo',['$timeout',function($timeout){ return { restrict:'AE',replace:'true',template:'<h1>Hello World!</h1>' scope:{ data:'=' } link:funciton(scope,element,attr){ $timeout(function(){ console.log('scope.data:',scope.data); },1000) } }; }])
此时在html中是这样的
<test-demo data='hello'></test-demo>
那么不出意外的话,控制台是会出现hello的,
但是,这样的代码,就是龊......
那么我们要怎么来写会高大上一点呢,看下面
angular.module('myApp').directive('testDemo',attr){ scope.$watch("data",function(){ console.log('scope.data',scope.data); }); } }; }])
没错,这里我们用了angular自带的$watch函数,用来监视data这个属性是否获取到了值,
只要它一获取到值,那么接下就可以干活了,
这是一个很好的解决异步的方法,不需要我们考虑异步的时间,而是由异步操作的值来决定,
接下来的步骤是否需要进行下去
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。