寫代碼時候發現Angular的ng-src指令並不會立刻讓圖片更新,而是在更新其他scope下的變量后才能更新。
<img ng-src="{{logoSrc}}"/>
給$scope.logoSrc賦值為字符串是有效果的,只是無法實現立刻更新。
Angular的視圖更新機制是,執行序列執行結束后都去檢查是否有數據的改變,發現數據改變后就馬上調用$scope.$apply()方法,再由$scope.$apply()方法調用$scope.$digest()改變視圖。而我們在Angular下所寫的代碼,幾乎全部都被包含在$scope.$apply()之下。
如果視圖沒有立即更新,那就說明了這部分的代碼並沒有被包含在$scope.$apply()之下,例如:DOM事件、setTimeout、XHR或其他第三方的庫這類事件就有這種情況。
$scope.logoSrc = 字符串;
因此我們要讓圖片立刻更新,可以把js代碼改成這樣:
var time = new Date().getTime(); //用於提供實時隨機數
$scope.$apply(function () { $scope.logoSrc = 字符串 + '?' + time; //增加隨機參數時間可強制刷新 });
增加time作為隨機參數,可以避免圖片名字沒有變化,而實際圖片內容已經變化的情況。這樣就算圖片同名也可以實時更新。