AngularJS展示數據的ng-bind指令和{{}} 區別


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

一種是使用花括號插值的方式:

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

 

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

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

 

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

原因是,瀏覽器需要首先加載index.html頁面,渲染它,然后AngularJS才能把它解析成你期望看到的內容。

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM