angular 數(shù)據(jù)綁定之[]和{{}}的區(qū)別
問題描述
在學習angular時，在示例代碼寫到加載圖片時，書中推薦使用單向數(shù)據(jù)綁定符號[]來綁定圖片的路徑，然后雙花括號的寫法是錯的。
嘗試
首先，按書中推薦的寫法：
<img [src]="imgUrl" />
這里就省略了控制器中定義變量的代碼。
然后又按書中說錯誤的方式進行嘗試：
<img src="{{ imgUrl }}" />
最后的測試結(jié)果發(fā)現(xiàn)兩種寫法都可以正常加載圖片，并沒有出現(xiàn)將{{ imgUrl }}解析成字符串的問題。
重讀
發(fā)現(xiàn)沒有達到預期的效果，所以就又重新看了一下書中是怎么說的：
如果瀏覽器在Angular運行起來之前就加載了這段模板，就會嘗試以字符串{{ imgUrl }}為Url來加載圖片，這當然會得到一個“404 Not found”錯誤。在Angular運行起來之前，瀏覽器會在頁面顯示一個破損的圖像。
仔細讀了上面的原文，發(fā)現(xiàn)出現(xiàn)錯誤是有條件的。那什么時候才會觸發(fā)上面的錯誤呢？
猜測
聯(lián)想到angularjs中的雙花括號，與angular類似，之前在使用的時候就會出現(xiàn)變量沒有被正常加載的問題，導致頁面直接顯示{{...}}的現(xiàn)象。當時出現(xiàn)這種問題是在加載緩慢，或者重復刷新。原因就是模板加載完成了，但是angularjs并沒有加載完全。
所以，我就大膽猜測，當angular加載緩慢的時候，{{}}的寫法就會出現(xiàn)問題。
（這里筆者經(jīng)過幾次嘗試，并沒有出現(xiàn)問題。如果有人嘗試出，歡迎指正。）
兩種綁定的區(qū)別
使用[]和{{}}的區(qū)別并不大，兩者都是一種angular中的單向綁定實現(xiàn)方式，卻別就是使用{{}}的形式，會將括號中的表達式解析完成后，再將結(jié)果轉(zhuǎn)換成字符串。而[]不會轉(zhuǎn)換成字符串。
總結(jié)
有些問題可能以我們目前的水平并不能很好的解釋，但是做出一個令自己信服的猜測還是很容易的。哪怕這個猜測在未來的某一天被證實是錯誤的，那只會是你新的積累的開始。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
- 詳解Angularjs 自定義指令中的數(shù)據(jù)綁定
- angularjs 的數(shù)據(jù)綁定實現(xiàn)原理
- Angular數(shù)據(jù)綁定機制原理
- Angular2學習筆記之數(shù)據(jù)綁定的示例代碼
- Angular自定義組件實現(xiàn)數(shù)據(jù)雙向數(shù)據(jù)綁定的實例
- 淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機制)
- Angularjs中數(shù)據(jù)綁定的實例詳解
- Angular 2.0+ 的數(shù)據(jù)綁定的實現(xiàn)示例
- Angular2數(shù)據(jù)綁定詳解
- AngularJS1.X學習筆記2-數(shù)據(jù)綁定詳解
相關(guān)文章
Angular.js實現(xiàn)獲取驗證碼倒計時60秒按鈕的簡單方法
最近做項目的時候又遇到了驗證碼倒計時的需求，發(fā)現(xiàn)這個功能還是挺實用的，所以就想著總結(jié)一下，下面這篇文章主要給大家介紹了關(guān)于利用Angular.js如何實現(xiàn)獲取驗證碼倒計時按鈕的簡單方法，需要的朋友可以參考借鑒，下面來一起看看吧。2017-10-10
這篇文章主要介紹了簡單談談Angular中的獨立組件的使用的相關(guān)資料,通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，需要的朋友可以參考下2022-08-08
AngularJS 與Bootstrap實現(xiàn)表格分頁實例代碼
這篇文章主要介紹了AngularJS 與Bootstrap實現(xiàn)表格分頁的相關(guān)資料,并附實例代碼和實現(xiàn)效果圖，需要的朋友可以參考下2016-10-10
本文續(xù)上文，接著介紹AngularJS語法，和上文一樣，都是通過示例來向大家分析說明，非常不錯的一篇文章，推薦給大家。2015-01-01
MODULE_INITIALIZER初始化Angular?懶加載模塊高級技巧
這篇文章主要為大家介紹了MODULE_INITIALIZER初始化Angular懶加載模塊高級技巧示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
這篇文章主要介紹了angularjs性能優(yōu)化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
Angularjs使用directive自定義指令實現(xiàn)attribute繼承的方法詳解
這篇文章主要介紹了Angularjs使用directive自定義指令實現(xiàn)attribute繼承的方法,結(jié)合實例形式較為詳細的分析了基于directive自定義指令實現(xiàn)attribute繼承的具體步驟與相關(guān)技巧,需要的朋友可以參考下2016-08-08
Ionic+AngularJS實現(xiàn)登錄和注冊帶驗證功能
這篇文章主要介紹了Ionic+AngularJS實現(xiàn)登錄和注冊帶驗證功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
本篇文章主要介紹了如何在Angular2中使用jQuery及其插件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了詳解AngularJS中的作用域,是AngularJS學習中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06