再谈 angular directive 异步处理

2019独角兽企业重金招聘Python工程师标准>>>

曾经在一篇博客中介绍过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',['$timeout',function($timeout){
 return {
        restrict:'AE',
        replace:'true',
        template:'<h1>Hello World!</h1>'
        scope:{
           data:'='
        }
        link:funciton(scope,element,attr){
           scope.$watch("data",function(){
              console.log('scope.data',scope.data);
           });
        }
    };
}])

没错,这里我们用了angular自带的$watch函数,用来监视data这个属性是否获取到了值,

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

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

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

转载于:https://my.oschina.net/codingBingo/blog/707459