## 简单的表达式 **运算表达式** ``` <h1>{{ 1+1 }}</h1> // 2 ``` **字符串表达式** ``` <p>{{ '字符串表达式' }}</p> // 字符串表达式 ``` **对象表达式** ``` <div ng-init="person={name:'angular'}"> <p>{{ person.name }}</p> </div> // angular ``` **数组** ``` <div ng-init="arr=[1, 'a']"> <p>arr[1]</p> </div> // a ``` 其实，双花括号是指令"`ng-bind`"的缩写形式。 ``` <div ng-init="arr=[1, 'a']"> <p>arr[1]</p> </div> ``` 等价于： ``` <div ng-init="arr=[1, 'a']"> <p><span ng-bind="arr[1]"></span></p> </div> ``` 有一点要特别注意：HTML加载含有`{{ }}`语法的元素后并不会立刻渲染它们，这也是因此而导致未渲染内容闪烁（Flash of Unrendered Content， FOUC）。但是使用`ng-bind`可以避免这个问题，因为内容会被当做子文本节点渲染到含有`ng-bind`指令的元素内。 当然，还有另一种处理闪烁问题，那就是使用另一个指令：`ng-cloak` 当一个元素中含有此指令时，只有AngularJS模板已经完全编译，才会显示该元素。否则，显示元素的原始形式和模板代码。 ``` <div class="ng-cloak">{{1+2+3}}</div> ```