关于 ng-model 和 ng-bind 还有 {{ }}

What's the difference between ng-model and ng-bind

ng-bind has one-way data binding ($scope --> view). It has a shortcut {{ val }} which displays the scope value $scope.val inserted into html where val is a variable name.

ng-model is intended to be put inside of form elements and has two-way data binding ($scope --> view and view --> $scope) e.g. <input ng-model="val"/>.

ng-bind是从$scope -> view的单向绑定

ng-modle是$scope <-> view的双向绑定

在AngularJS中显示模型中的数据有两种方式：

<p>{{text}}</p>

另一种是使用基于属性的指令，叫做ng-bind：

<p ng-bind="text"></p>

主要区别在于，使用花括号语法时，在AngularJS使用数据替换模板中的花括号时，第一个加载的页面，通常是应用中的index.html，其未被渲染的模板可能会被用户看到。而使用第二站方法的视图不会遇到这种问题。

原因是，浏览器需要首先加载index.html页面，渲染它，然后AngularJS才能把它解析成你期望看到的内容。

所以，对于index.html页面中的数据绑定操作，建议采用ng-bind。那么在数据加载完成之前用户就不会看到任何内容。

元素对指令的支持：

ng-value 用于设置 input 或 select 元素的 value 属性

<input ng-value="expression"></input>

ng-model  <input>, <select>, <textarea>, 元素支持该指令。

<element ng-model="name"></element>

ng-bind 指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。

如果给定的变量或表达式修改了，指定替换的 HTML 元素也会修改。所有的 HTML 元素都支持该指令。

<element ng-bind="expression"></element>

或作为 CSS 类：

<element class="ng-bind: expression"></element>

angularjs 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

https://blog.csdn.net/u010423904/article/details/51023412