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中的函数的绑定。