1. 程式人生 > >淺談angularJS中src與ng-src屬性的區別

淺談angularJS中src與ng-src屬性的區別

圖片初始化報錯404的異常
瀏覽器解析html的順序:
1) 瀏覽器載入靜態HTML檔案並解析為DOM;
2) 瀏覽器載入angular.js檔案;
3) angular監聽 DOMContentLoaded 事件,監聽到時開始啟動;
4) angular尋找ng-app指令,確定作用範圍;
5) 找到app中定義的Module使用$injector服務進行依賴注入;
6) 根據injector服務建立compile服務用於編譯;
7) $compile服務編譯DOM中的指令、過濾器等;
8) 使用ng-init指令,將作用域中的變數進行替換;
9) 最後生成了我們的最終檢視。
	因此,angular框架是在DOMcontent載入完畢後才開始發揮作用。假如我們模板中有一張圖片如下:
<
img
src="{{imageUrl}}" />
,瀏覽器解析HTML為DOM的時候會把src="{{imageUrl}}"原樣解析,因此會報404的錯誤
	ng-src指令的本質是先從$scope的記憶體中獲取ng-src的屬性值,再賦值給src的屬性值,因此當ng-src屬性值獲取到了url時,瀏覽器會解析為<img ng-src="url" src="url"></img>,最終其顯示圖片作用的還是src屬性
	ng-src屬性會做兩件事:
第一步:先判斷ng-src的屬性值是否為null或者空字串
第二步:如果不為null或者空字串,就會把自己的值賦值給src屬性
第三步:如果為null或者空字串,就不會把自己的值賦值給src屬性

案例
	1.<
img
ng-src="{{imageUrl}}">
</img> //結果都為imageUrl 瀏覽器會解析為 <img ng-src="{{imageUrl}}" src="{{imageUrl}}"></img> 2.<img ng-src="{{imageUrlOne}}" src="{{imageUrlTwo}}"></img> //結果都為imageUrlOne 瀏覽器會解析為 <img ng-src="{{imageUrlOne}}" src="{{imageUrlOne}}"></img
>
3.<img ng-src="" src="{{imageUrl}}"></img> //結果都為imageUrl 瀏覽器會解析為 <img ng-src="" src="{{imageUrl}}"></img> 注意: 通常我們會使用<img ng-src="{{imageUrl}}"/>解決初始化時url報錯的問題;但是這樣有個弊端,當我們需要清空圖片資訊時,需要設定$scope.url=null或者空字串,那麼將無法影響src屬性,也就是說圖片仍然顯示清空前的圖片,但是提交無法提交上去,即: //初始值 <img ng-src="{{imageUrl}}"/> 瀏覽器解析為:<img ng-src="{{imageUrl}}" src="{{imageUrl}}"/> //對ng-src重新賦值為空 $scope.imageUrl=""; //結果 <img src="{{imageUrl}}"/>