angulaire.js - Comment forcer la mise à jour du DOM angulaire
阿神
阿神 2017-05-15 16:58:08
0
2
931

Présentation

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

.

Idée générale

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épondre à tous(2)
滿天的星座

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

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal