Page 85 - AngularJS权威教程
P. 85
9.2 在指令中使用子作用域 65
ng-init最常见的使用场景是：在类似本节的例子中那样，需要创建小的示例代码的时候。 1
对于任何需要健壮结构的场景，请在控制器中用数据模型对象来设置状态。
<div ng-init="greeting='Hello';person='World'"> 2
{{greeting}} {{person}}
</div>
3
在线示例：http://jsbin.com/OZENuhO/1/。
9. {{ }}
4
<div>{{name}}</div>
{{ }}语法是AngularJS内置的模板语法，它会在内部$scope和视图之间创建绑定。基于这个 5
绑定，只要$scope发生变化，视图就会随之自动更新。
事实上它也是指令，虽然看起来并不像，实际上它是ng-bind的简略形式，用这种形式不需 6
要创建新的元素，因此它常被用在行内文本中。
注意，在屏幕可视的区域内使用{{ }}会导致页面加载时未渲染的元素发生闪烁，用ng-bind 7
可以避免这个问题。
<body ng-init="greeting='HelloWorld'"> 8
{{ greeting }}
</body>
9
在线示例：http://jsbin.com/ODUxeho/1/edit。
10. ng-bind
10
尽管可以在视图中使用{{ }}模板语法（AngularJS内置的方式），我们也可以通过ng-bind
指令实现同样的行为。
11
<body ng-init="greeting='HelloWorld'">
<p ng-bind="greeting"></p>
</body> 12
在线示例：http://jsbin.com/esihUJ/1/edit。
HTML加载含有{{ }}语法的元素后并不会立刻渲染它们，导致未渲染内容闪烁（Flash of 13
Unrendered Content，FOUC）。我可以用ng-bind将内容同元素绑定在一起避免FOUC。内容会被
当作子文本节点渲染到含有ng-bind指令的元素内。 14
11. ng-cloak
15
除使用ng-bind来避免未渲染元素闪烁，还可以在含有{{ }}的元素上使用ng-cloak指令：
<body ng-init="greeting='HelloWorld'">
<p ng-cloak>{{ greeting }}</p> 16
</body>
ng-cloak指令会将内部元素隐藏，直到路由调用对应的页面时才显示出来。 17
在线示例：http://jsbin.com/AJEboLO/1/edit。
18
