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

Question

简介

目前有一个音乐播放器,具体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取出一条数据代表当前播放的音乐为一个对象，格式如下 {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强制刷新？

Answer 1

Refer to $scope.$apply

Answer 2

If it is not in the ng function, just pass $scope and $apply where the value is modified