Angular directive 深入探讨

关于Angular directive 我已经写过一篇博文来介绍过了，但是今天我为什么还要再来讲一下呢？因为原来的只是最简单的实现，而在我们真正的项目中，这些最简单方式似乎就没有什么用了，那么这个时候我们就需要用到更多的功能甚至方法来实现我们项目需求中的那些效果。。。。

好啦,废话不多说,我们开始讲解吧

首先对于directive这个方法我就不多介绍了,具体我们就来讲一下directive中的那个回调函数说返回的对象,在上次我们讲到了这个对象可以返回三个属性,他分别是restrict,template,replace,当然这三个属性是最直接的,也是最简单的,在这里我就不多介绍了哈

那么接下来介绍一个link属性,看这里........

link:function(scope,element,attrs){
    element.text('Directive!!!');
}

没错的,这是一个属性,也是一个方法,他的作用主要是为了操作dom,我们看一下link函数的参数:

1. scope   这个就是当前controller的$scope对象,没啥问题哈

2. element 这个是当前dom节点经过"jQuery"处理后的对象.当然这个是jQuery的阉割版,方法是少了很多的,但是在Angular里面,已经足够了.....

3. attrs   这个对象包含当前dom节点上的各种属性标签的值.不过要注意的是这边会将xxx-bbb这种形式改为xxxBbb这种驼峰形式
   

好啦,说到这里好多人就会着急来试一试了,咱们先别急哈,还有几个点要讲一下,关于link函数中的参数,如果我们要用的话,这里是会有一个异步加载的问题的,天哪!!!!!!又是异步问题,可能这是大家最头疼的问题吧,哎没办法啦........

打个比方,我们现在要用scope和element这两参数,那么我们就要需要异步调用,那么怎么调用呢?

下面提供两种方法

一.这个方法是在directive中dom内容加载完成之后,这些函数都是可以取到值得啦.....

angular.element(element).ready(function(){
    //do something
    console.log('scope:',scope);
    console.log('element:',element);
});

二.此方法比较简单粗暴,就是我们延时一段时间之后再去取值,这个是最稳妥的方法,也是比较直接的啦,嘿嘿

setTimeout(function(){
    //do something
    console.log('scope:',scope);
    console.log('element:',element);
},100);

OK,有了以上的方法呢,就可以保证可以取到值了哈,

还记得我还在上课的时候,老师说过一句话,'只要你能取到页面中的那个元素,那就就可以对它想干嘛就干嘛了,嘿嘿嘿.....'

当然,这话说的很有道理,既然我们已经取到了这个节点,那么我们要对这些节点做任何操作都是可以的了