目前有一個音樂播放器,具體html如下
<audio class="music_audio" ng-src="{{now_music.src}}" ></audio>
<button class="btn btn-default" ng-click="musicPlay()">
<span class="glyphicon "ng-class="playClass?'glyphicon-pause':'glyphicon-play'"></span>
</button>
button class="btn btn-default" 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取出一條數(shù)據(jù)代表當前播放的音樂為一個對象,格式如下 {src:"http://baidu.com/1.mp3",name:"xxxname"}
playClass為按鈕狀態(tài) true按鈕為播放的樣式 false按鈕為暫停樣式
this.music_progress為進度條 這個可以先無視掉
當點擊下一曲的時候會從list中獲取下一個音樂,然后更新now_music,視圖根據(jù)now_music.src來更新DOM,同時設置當前的音樂為暫停狀態(tài).利用的是src變化會自動重置,
現(xiàn)在問題來了
如果有兩個相同的src,比如[{src:"123.mp3"},{src:123.mp3}]那么視圖是不會更新src的 于是當點擊下一曲的時候獲取到的還是當前音樂狀態(tài).
于是想問問在angularJS中就算src是一樣的如何使DOM強制刷新?
閉關修行中......