数据绑定指令

Posted 2020-08-29 linfang.zhou

ng-bind   绑定一个html元素的 innerText 属性

ng-bind-html    使用一个HTML元素的 innerHTML 属性创建数据绑定

ng-bind-template     与 ng-bind 指令类似，但是允许在属性值中指定多个模板表达式

ng-model         创建一个双向数据绑定

ng-non-bindable          声明一块不会执行数据绑定的区域

单向数据绑定：

ng-bind   或者   {{表达式}}

eg: 1、 <div>There are {{todos.length}} items</div>

　　2、 <div>There are <span ng-bind="todos.length"></span> items</div>

ng-bind-template 指令， 指定模板表达式

　　eg: <div ng-bind-template="First: {{todos[0].action}}. Second: {{todos[1].action}}"></div>

　　结果：First:get groceries. Second:call number

 

<!-- ng-non-bindable 声明一块不执行数据绑定的区域 -->
<div ng-non-bindable>
Angular uses {{and}} characters for templates
</div>

结果：Angular uses {{and}} characters for templates

<!--不添加 ng-non-bindable 指令，将会执行数据绑定-->
<div>
Angular uses {{and}} characters for templates
</div>

结果：Angular uses characters for templates