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