AngularJS 關於ng-model和ng-bind還有{{}}

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

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"/>.ide

ng-bind是從$scope -> view的單向綁定
ng-modle是$scope <-> view的雙向綁定雙向綁定


在AngularJS中顯示模型中的數據有兩種方式:orm

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

另外一種是使用基於屬性的指令,叫作ng-bind:element

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

主要區別在於,使用花括號語法時,在AngularJS使用數據替換模板中的花括號時,第一個加載的頁面,一般是應用中的index.html,其未被渲染的模板可能會被用戶看到。而使用第二站方法的視圖不會遇到這種問題。form

緣由是,瀏覽器須要首先加載index.html頁面,渲染它,而後AngularJS才能把它解析成你指望看到的內容。模板

因此,對於index.html頁面中的數據綁定操做,建議採用ng-bind。那麼在數據加載完成以前用戶就不會看到任何內容。

相關文章
相關標籤/搜索