Page 83 - AngularJS权威教程

9.2 在指令中使用子作用域 63

1
在开发中，可以通过命令行命令chrome --allow-file-access-from-files来
禁止CORS错误。只在紧急情况下使用这个方法，比如你的老板正站在你身后，
并且所有事情都无法正常工作。 2

在同一个元素上添加onload属性可以在模板加载完成后执行一个表达式。
3
要记住，使用ng-include时AngularJS会自动创建一个子作用域。如果你想使用某个特定的作
用域，例如ControllerA的作用域，必须在同一个DOM元素上添加ng-controller ="ControllerA" 4
指令，这样当模板加载完成后，不会像往常一样从外部作用域继承并创建一个新的子作用域。下
面看一个例子：
5
<div ng-include="/myTemplateName.html"
ng-controller="MyController"
ng-init="name = 'World'">
Hello {{ name }} 6
</div>

4. ng-switch 7
这个指令和ng-switch-when及on="propertyName"一起使用，可以在propertyName发生变
化时渲染不同指令到视图中。在下面的例子中，当person.name是Ari时，文本域下面的div会显 8
示出来，并且这个人会获得胜利：

<input type="text" ng-model="person.name"/> 9
<div ng-switch on="person.name">
<p ng-switch-default>And the winner is</p>
<h1 ng-switch-when="Ari">{{ person.name }}</h1>
</div> 10
注意，在switch被调用之前我们用ng-switch-default来输出默认值。
11
在线示例：http://jsbin.com/AVihUdi/2/。
5. ng-view
12
ng-view指令用来设置将被路由管理和放置在HTML中的视图的位置。第12章会深入研究这
些内容。 13

查看第12章获得更详细信息。

6. ng-if 14
使用ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if
的表达式的值是false，那对应的元素将会从DOM中移除，否则对应元素的一个克隆将被重新插 15
入DOM中。
ng-if同no-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而 16
是真正生成或移除节点。

当一个元素被ng-if从DOM中移除，同它关联的作用域也会被销毁。而且当它重新加入DOM 17
中时，会通过原型继承从它的父作用域生成一个新的作用域。
18
同时有一个重要的细节需要知道， ngIf重新创建元素时用的是它们编译后的状态。如果ng-if