解决Angular图片ng-src指令不马上更新图片的问题

最新推荐文章于 2021-05-22 00:53:51 发布

初仔仔

最新推荐文章于 2021-05-22 00:53:51 发布

阅读量650

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mazhaokeng/p/6802839.html

本文介绍了Angular中如何解决图片无法即时更新的问题。通过在$scope.$apply()中加入时间戳作为图片URL的一部分，确保图片内容的变化能立即反映在视图上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　写代码时候发现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作为随机参数，可以避免图片名字没有变化，而实际图片内容已经变化的情况。这样就算图片同名也可以实时更新。

转载于:https://www.cnblogs.com/mazhaokeng/p/6802839.html