Actuellement, il existe un lecteur de musique, le code HTML spécifique est le suivant
<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 est l'élément audio
this.now_music prend une donnée de this.music_list pour représenter la musique en cours de lecture en tant qu'objet. Le format est le suivant {src : "http://baidu.com/1.mp3",name:"xxxname"}
. playClass est l'état du bouton bouton vrai Le bouton faux est le style de lecture et le style de pause
this.music_progress est la barre de progression pour l'instant
Lorsque vous cliquez sur la chanson suivante, la musique suivante sera obtenue dans la liste, puis mettra à jour now_music. La vue mettra à jour le DOM en fonction de now_music.src, et en même temps mettra la musique actuelle en pause. état. Le fait est que les modifications de src seront automatiquement réinitialisées
Voici maintenant le problème
S'il y a deux mêmes src, telles que [{src: "123.mp3"}, {src:123.mp3}] , alors la vue est src ne sera pas mise à jour Ainsi, lorsque vous cliquez sur la chanson suivante, vous obtenez toujours l'état actuel de la musique
Je voudrais donc demander comment forcer le rafraîchissement du DOM dans AngularJS même si le src est le même ?
Référez-vous à $scope.$apply
Si ce n'est pas dans la fonction ng, passez simplement $scope et $apply là où la valeur est modifiée