angular.js - 如何使 angular DOM強制更新
阿神
阿神 2017-05-15 16:58:08
0
2
910

簡介

目前有音樂播放器,具體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強制刷新?

阿神
阿神

闭关修行中......

全部回覆(2)
滿天的星座

參考$scope.$apply

滿天的星座

如果是因為不在ng函數裡面的話,傳$scope 在值發生修改的地方$aply就可以了

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板