angular指令（一）

angular的指令分为内置指令和自定义指令。

自定义指令的基本格式如下：

angular.module('myApp',[])
.directive('myDirective', function() {
return {
restrict: 'E',
template: '<a href="http://google.com">
Click me to go to Google</a>'
};
});

 

这是定义了一个名叫myDirective的指令，在HTML使用时，只需编写如下即可：

<my-directive></my-directive>

 

directive()方法返回的对象中包含了用来定义和配置指令所需的方法和属性。

默认情况下，AngularJS将模板生成的HTML代码嵌套在自定义标签<my-directive>内部。

 

下面向指令定义中添加一些新的设置：我们可以将自定义标签从生成的DOM中完全移除掉，
并只留下由模版生成的链接。将replace设置为true就可以实现这个效果：

angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: 'E',
replace: true,
template: '<a href="http://google.com">Click me to go to Google</a>'
};
});

再次看一下生成后的代码，会发现DOM中原始的指令声明已经不见了，只有我们在模板中
写的HTML代码。replace方法会用自定义元素取代指令声明，而不是嵌套在其内部，如下图
所示。

 

下面都是用来声明前面创建指令的合法格式：

<my-directive></my-directive>
<div my-directive></div>
<div class="my-directive"></div>
<!--directive:my-directive-->

 

为了让AngularJS能够调用我们的指令，需要修改指令定义中的restrict设置。这个设置告
诉AngularJS在编译HTML时用哪种声明格式来匹配指令定义。我们可以指定一个或多个格式。
例如，之前创建的指令中可以指定以元素（E）、属性（A）、类（C）或注释（M）的格式来
调用指令：

angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: 'EAC',
replace: true,
template: '<a href="http://google.com">Click me to go to Google</a>'
};
});

 

无论有多少种方式可以声明指令，我们坚持使用属性方式，因为它有比较好的跨浏览器兼容性：
<div my-directive></div>
为了更加明确我们的意图，将restrict设置为字母A（代表attribute）：
restrict: 'A'
遵循这个约定的同时，也要注意每个浏览器的内置样式，以便决定指令模板在HTML中是嵌
套在声明元素内，还是替换声明元素。

 用表达式来声明指令
我们知道声明指令时既可以使用表达式，也可以不使用表达式。下面回顾一下几种合法的表
达式声明：

<my-directive="someExpression">
</my-directive>
<div my-directive="someExpression">
</div>
<div class="my-directive:someExpression">
</div>
<!-- directive: my-directive someExpression -->