Angular 关于ng-src不立即刷新的问题

Angular 关于ng-src不立即刷新的问题

	首先,自我介绍,我是一个怕蜜蜂的人,over~
	本篇为个人笔记,勿喷

最近用Angular写代码时候发现Angular的ng-src指令并不会立刻让图片更新,而是隔了一段时间后才更新,这个一段时间可能是3,4秒,也可能是1分钟。后来查阅资料才知道,这个指令与其他内部指令稍有不同。
按照懒汉(我)的书写习惯,一般会在服务器下发图片的url过后直接将url赋值给一个scope里的对象比如这样:

	$scope.fup(el, data,{
            success:function (resdata) {
            	$scope.urlListDetail.icon =  resdata 
            }
	)

这样赋值可以达到我们想要的功能,但不能达到我们想要的效果,因为它不会立即刷新图片的URL。Angular的视图更新机制是,执行序列执行结束后都去检查是否有数据的改变,发现数据改变后就马上调用 s c o p e . scope. scope.apply()方法,再由 s c o p e . scope. scope.apply()方法调用 s c o p e . scope. scope.digest()改变视图。而我们在Angular下所写的代码,几乎全部都被包含在 s c o p e . scope. scope.apply()之下。如果视图没有立即更新,那就说明了这部分的代码并没有被包含在 s c o p e . scope. scope.apply()之下,例如:DOM事件、setTimeout、XHR或其他第三方的库这类事件就有这种情况。其中,src的改变就是典型的DOM事件,它的这部分代码并没有被包含在 s c o p e . scope. scope.apply()之下,所以无法实现立刻更新,这个时候可以把js代码改成这样来解决这个问题:

	$scope.fup(el, data,{
            success:function (resdata) {
            	var time = new Date().getTime();    //用于提供实时随机数
                $scope.$apply(function () {
                    $scope.urlListDetail.icon =  resdata + '?' + time;  //增加随机参数时间可强制刷新
                });
            }
	)
  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值