Page 68 - AngularJS权威教程

48 第 8 章 指令简介

图8-5 替换现有元素

从现在起，我们把创建的这些自定义元素称作指令（用.directive()方法创建），因为事实
上声明指令并不需要创建一个新的自定义元素。

声明指令本质上是在HTML中通过元素、属性、类或注释来添加功能。

下面都是用来声明前面创建指令的合法格式：
<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中是嵌
套在声明元素内，还是替换声明元素。