angular.js - 如何使 angular DOM强制更新

浏览:63日期:2023-01-21

问题描述

简介

目前有一个音乐播放器,具体html如下

<audio ng-src='https://www.6hehe.com/wenda/{{now_music.src}}' ></audio><button ng-click='musicPlay()'> <span class='glyphicon 'ng-class='playClass?’glyphicon-pause’:’glyphicon-play’'></span></button>button ng-click='musicNext()'> <span class='glyphicon glyphicon glyphicon-step-forward'></span></button> musicElem.next=function(){this.clearProgressbar()this.now_music=this.music_list[this.music_list.indexOf(this.now_music)+1];console.log('now list',this.music_list)this.play();$rootScope.$broadcast('state_play',true)$rootScope.$broadcast('now_music',this.now_music)console.log('now music',this.now_music) } musicElem.play=function(){console.log(this.music_audio.paused)if(this.music_audio.paused){ this.music_audio.play(); this.progressbar(); $rootScope.$broadcast('state_play',true)}else{ this.music_audio.pause() $rootScope.$broadcast('state_play',false) $(this.music_progress).stop(true)} }

this.music_audio就是audio元素this.now_music是从this.music_list取出一条数据代表当前播放的音乐为一个对象,格式如下 {src:'http://baidu.com/1.mp3',name:'xxxname'}playClass为按钮状态 true按钮为播放的样式 false按钮为暂停样式this.music_progress为进度条 这个可以先无视掉

大致思路

当点击下一曲的时候会从list中获取下一个音乐,然后更新now_music,视图根据now_music.src来更新DOM,同时设置当前的音乐为暂停状态.利用的是src变化会自动重置,现在问题来了如果有两个相同的src,比如[{src:'123.mp3'},{src:123.mp3}]那么视图是不会更新src的 于是当点击下一曲的时候获取到的还是当前音乐状态.于是想问问在angularJS中就算src是一样的如何使DOM强制刷新?

问题解答

回答1:

参考$scope.$apply

回答2:

如果是因为不在ng函数里面的话,传$scope 在值发生修改的地方$aply就可以了

相关文章: