Page 65 - AngularJS权威教程
P. 65
8.1 指令：自定义 HTML 元素和属性 45
做合成。 1
为了有效了解如何将一个个小组件组合成一个复杂的系统，首先要了解更基础的内容。接下
来几节的目标就是帮助你了解这些基础内容，我们开始吧。 2
1. HTML引导
当浏览器加载一个包含AngularJS应用的HTML时，我们只需要一小段很简单的代码就能够启 3
动AngularJS应用（前面的章节介绍过相关内容）。
在HTML中要用内置指令ng-app标记出应用的根节点。这个指令需要以属性的形式来使用， 4
因此可以将它写到任何位置，但是写到<html>的开始标签上是最常规的做法：
5
内置指令是打包在AngularJS内部的指令。所有内置指令的命名空间都使用ng作
为前缀。为了防止命名空间冲突，不要在自定义指令前加ng前缀。
6
<html ng-app="myApp">
<!-- 应用的$rootScope --> 7
</html>
现在，在HTML元素中可以使用所有内置或自定义指令了。同时，基于JavaScript的原型继承
8
机制，任何在这个根元素内部的指令只要能够访问作用域，就可以访问$rootScope。这里的能
够访问作用域指的是同DOM进行了链接，这个操作会在指令稍后的生命周期中进行。
9
由于指令的生命周期非常复杂，会有专门的章节来介绍。在那部分内容中还会讨论指令中哪
些方法是可以访问作用域的，以及作用域是如何在指令间共享的。详细内容请查看第10章。
10
2. 我们的第一个指令
学习指令最快的途径就是亲自使用它，让我们来创建一个自定义指令。看看下面的HTML元 11
素，后面我们会用到它：
<my-directive></my-directive>
12
假设我们已经创建了一个完整的HTML文档，其中包含了AngularJS，并且DOM中已经用
ng-app指令标识出了应用的根元素，当AngularJS编译HTML时就会调用指令。
13
10.3节会介绍指令生命周期中的编译阶段。
14
调用指令意味着执行指令背后与之相关联的JavaScript代码，这些代码是我们用指令定义写出
来的。 15
myDirective指令的定义看起来是这样的：
16
angular.module('myApp',[])
.directive('myDirective', function() {
return {
restrict: 'E', 17
template: '<a href="http://google.com">
Click me to go to Google</a>'
}; 18
});
