解決Angular圖片ng-src指令不馬上更新圖片的問題


  寫代碼時候發現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作為隨機參數,可以避免圖片名字沒有變化,而實際圖片內容已經變化的情況。這樣就算圖片同名也可以實時更新。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM