Page 67 - AngularJS权威教程

8.1 指令：自定义 HTML 元素和属性 47

注意，代码和你在文本编辑器中输入的没有区别，同时其中并没有一个链接标签。但的确屏 1
幕上有一个链接写着“Click Here”，这是怎么回事？
为了分析这个现象，右键点击链接，在弹出菜单中选择Inspect Element，如图8-3所示。 2

3

4

5

图8-3 Inspect Element 6

这样就可以打开Chrome开发者工具，并看到AngularJS在页面加载以及调用指令定义后生成
的代码，AngularJS把生成后的代码提供给Chrome进行渲染，如图8-4所示。 7

8

9

10

11

12

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

下面向指令定义中添加一些新的设置：我们可以将自定义标签从生成的DOM中完全移除掉，
并只留下由模版生成的链接。将replace设置为true就可以实现这个效果： 14
angular.module('myApp', [])
.directive('myDirective', function() { 15
return {
restrict: 'E',
replace: true,
template: '<a href="http://google.com">Click me to go to Google</a>' 16
};
});
17
再次看一下生成后的代码，会发现DOM中原始的指令声明已经不见了，只有我们在模板中
写的HTML代码。replace方法会用自定义元素取代指令声明，而不是嵌套在其内部，如图8-5
所示。 18