Page 66 - AngularJS权威教程

46 第 8 章 指令简介

上面的JavaScript代码就是指令定义，效果如图8-1所示。10.1节会介绍定义指令
时所有的可用设置。

图8-1 简单指令的实践

通过AngularJS模块API中的.directive()方法，我们可以通过传入一个字符串和一个函数来
注册一个新指令。其中字符串是这个指令的名字，指令名应该是驼峰命名风格的，函数应该返回
一个对象。

驼峰命名风格用来将一个短语写在一个单词中，除了第一个单词外其他单词首
字母大写，中间不加空格。例如，bumpy roads用驼峰风格来写应该是
bumpyRoads。

在我们的例子中，在HTML里使用my-directive声明指令，因此指令定义必须
以myDirective为名字。

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

为了尽快掌握简单的属性定义，我们只用了restrict和template两个设置项来定义指令。
第10章将详细介绍定义指令时所有可用的方法和属性，但现在，先用Google Chrome的开发
者工具来对比一下输入的HTML和输出的HTML。
首先用Chrome打开你的HTML文档，会看到一个蓝色的“Click Here”链接。点击View→
Developer→View Source来查看源代码，会看见图8-2所示的画面。

图8-2 Chrome开发者工具