再谈 angular directive 异步处理

大佬教程收集整理的这篇文章主要介绍了再谈 angular directive 异步处理，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

曾经在一篇博客中介绍过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这个属性是否获取到了值,

只要它一获取到值,那么接下就可以干活了,

这是一个很好的@L_618_14@异步的方法,不需要我们考虑异步的时间,而是由异步操作的值来决定,

接下来的步骤是否需要进行下去

大佬总结

以上是大佬教程为你收集整理的再谈 angular directive 异步处理全部内容，希望文章能够帮你解决再谈 angular directive 异步处理所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。