AngularJS中的指令详解（1）

1.我们知道AngualrJS的重要的特性（1）MVC/MVVM（2）双向数据绑定（3）模块化和依赖注入（4）指令。

下面来介绍下什么是AngularJS中的指令：

首先，什么是指令，举例来说明：

JS部分：

       angular.module('myapp',[])
                .directive('hello',function(){
                    return{
                        restrict:'E',
                        template:'<div>Hi everyone!</div>',
                        replace:true
                    }
                })

html部分：<hello></hello>

显示效果：Hi everyone!

这是一个最简单的指令的含义，我们在HTML中使用了一个自定义的指令，结果生成了指令中的DOM元素。我们来分析上面的简单例子：

1) restrict属性：可选值为 AEMC，
其中A表示属性attribute的缩写，若定义为A,则指令的使用方式为：

<div hello></div>

其中E表示是element，表示的是元素，若定义为E，则指令使用：

<div hello></div>

其中M表示的是注释的方式，若定义为M，则指令的使用方式为:

<!-- directive:hello  --!>
<div></div>

其中C表示的是Class的缩写，若定义为C，则指令的使用方式为：

<div class="hello"></div>

2)template

模板，是HTML片段，可编写的量较少，并且也不好修改。
采用其他方式比如templateUrl，通过采用templateUrl，这样就可以不用再JS代码里面编写DOM结构。

templateUrl:'hello.html'

这样就可以把我们所需要的HTML片段写到一个html文件里面，然后直接引用或者调用即可！

3)templateCache

angular.module('myapp'.[]).run(function($templateCache){
   $templateCache.put('hello.html','<div>Hi everyone</div>')
})
myapp.directive('hello',function($templateCache){
   return{
     restrict:'AECM',
     template:$templateCache.get('hello.html'),
     replace:true
 }
})

4)replace

<hello><div>this is a test</div></hello>

如果是replace属性为true，则完全替换掉标签内的内容，如果为false，
则为：

return{
   restrict:'E',
   transclude:true,
   template:'<div>Hi everyone!<div ng-transclude></div></div>'
}

显示效果为：
Hi everyone!
this is a test
我们发现hello标签内的元素并没有被完全替换。

总：指令的执行过程

加载：加载angularJS，并且找到ng-app指令，确定应用的边界。

编译：遍历DOM，找到所有的指令，根据代码template等生成DOM结构，并且执行指令的compile函数。

链接：运行每一条指令的Link函数，一般操作DOM写在link指令中！

2.指令中的link函数
link函数中有4个形参，scope,element,attrs,fatherCtrl

(1)scope

scope所对应的是子类所在的父控制器的scope，举例来说明：

  angular.module('myapp',[])
                .controller('mycontroller',function($scope){
                    $scope.hello="hello world";
                })
                .directive('hello',function(){
                    return{
                       link:function(scope,element,attrs)
                       {
                           alert(scope.hello)
                       }
                    }
                })

此时在指令中会引入父类的$scope，即link函数中的scope参数，对应的 是父控制器中的$scope。

(2).element
link函数中的element指代的是当前引入指令的那个元素本身，我们可以而在element元素的基础上绑定事件等：

   angular.module('myapp',[])
                .directive('hello',function(){
                    return{
                       link:function(scope,element,attrs)
                       {
                          element.bind('click',function(){
                              alert("hello world")
                          })
                       }
                    }
                })

(3)attrs
link函数中的attrs形参，用于获得指令所在dom上的属性，用法如下：
首先我们在html中声明：

  <hello name="yuxiaoliang"></hello>
然后在angularjs中可以这样来得到name的值：
  angular.module('myapp',[])
                .directive('hello',function(){
                    return{
                       link:function(scope,element,attrs)
                       {
                         alert(attrs['name']);
                       }
                    }
                })

(4）fatherCtrl参数
这个参数用于继承父类指令中的控制器，这个指令比较复杂，我们来看：

    <div father child></div>

首先在html中有2个指令，一个father一个child，在angularJS中我们可以这样写道：

 angular.module('myapp',[])
                .directive('father',function(){
                    return{
                        controller:function(){
                            this.name=function(){
                                alert('father');
                            }
                        },
                        restrict:'A',
                        link:function(){

                        }
                    }
                })
                .directive('child',function(){
                    return{
                        require:'^father',
                        link:function(scope,element,attrs,fatherCtrl)
                        {
                            fatherCtrl.name();
                        }
                    }
                 });

通过require和fatherCtrl，可以在子类的指令中访问到父类指令中，在controller中定义的方法，注意：父类的controller和控制器的controller并不是同一个东西。

3.指令的独立scope

首先我们来看什么是独立scope，比如我们这里多次使用了同一个指令，
我们在html中这样定义：

   <hello></hello><br/>
   <hello></hello>

在angualrJS中：

“`
angular.module(‘myapp’,[])
.directive(‘hello’,function(){
return{
restrict:’E’,
template:”{{message}}”,

                    link:function(){

                    }
                }
            })

我们发现生成的元素，如果多次使用了同一个指令他们共享了一个作用域，因此效果是这样的：

只需要在指令中加上scope:{}，即可。显示效果如下：

4.scope的绑定策略

如何在指令的template中引入指令坐在控制器父类的方法和数据，这里就需要使用scope的绑定策略。

（1）@

@绑定实现的是字符串之间的绑定，比如我们举例来说，在html中有：

（2） =

=实现的是指令scope与template中scope的双向数据绑定。

（3）and
and实现的是指令scope与template中scope中的函数的绑定。