angular 資料繫結之[]和{{}}的區別

標籤：col   符號   net   路徑   order   www.   com   定義變數   get   

問題描述

在學習angular時，在範例程式碼寫到載入圖片時，書中推薦使用單向資料繫結符號[]來綁定圖片的路徑，然後雙花括弧的寫法是錯的。

嘗試

首先，按書中推薦的寫法：

前端精品教程：百度網盤下載

?

1	<img [src]="imgUrl" />

這裡就省略了控制器中定義變數的代碼。

然後又按書中說錯誤的方式進行嘗試：

?

1	<img src="{{ imgUrl }}" />

最後的測試結果發現兩種寫法都可以正常載入圖片，並沒有出現將{{ imgUrl }}解析成字串的問題。

重讀

發現沒有達到預期的效果，所以就又重新看了一下書中是怎麼說的：

如果瀏覽器在Angular運行起來之前就載入了這段模板，就會嘗試以字串{{ imgUrl }}為Url來載入圖片，這當然會得到一個“404 Not found”錯誤。在Angular運行起來之前，瀏覽器會在頁面顯示一個破損的映像。

仔細讀了上面的原文，發現出現錯誤是有條件的。那什麼時候才會觸發上面的錯誤呢？

猜測

聯想到angularjs中的雙花括弧，與angular類似，之前在使用的時候就會出現變數沒有被正常載入的問題，導致頁面直接顯示{{...}}的現象。當時出現這種問題是在載入緩慢，或者重複重新整理。原因就是模板載入完成了，但是angularjs並沒有載入完全。

所以，我就大膽猜測，當angular載入緩慢的時候，{{}}的寫法就會出現問題。

（這裡筆者經過幾次嘗試，並沒有出現問題。如果有人嘗試出，歡迎指正。）

兩種綁定的區別

前端精品教程：百度網盤下載

使用[]和{{}}的區別並不大，兩者都是一種angular中的單向綁定實現方式，卻別就是使用{{}}的形式，會將括弧中的運算式解析完成後，再將結果轉換成字串。而[]不會轉換成字串。

總結

有些問題可能以我們目前的水平並不能很好的解釋，但是做出一個令自己信服的猜測還是很容易的。哪怕這個猜測在未來的某一天被證實是錯誤的，那隻會是你新的積累的開始。

angular 資料繫結之[]和{{}}的區別