user5839 user5839 - 4 months ago 10
Javascript Question

Angular Play Button not update on audio complete

Strange issue

<button ng-show="scene.audio" class="button icon {{scene.audioIcon}}"
ng-click="playAudio(scene)"/>
$scope.playAudio = function ($scene){

if($scene.audioIcon == "ion-ios-play-outline") {
$scene.audioIcon = "ion-ios-pause-outline";
media = new Media($scene.audio.src,function(){
**$scene.audioIcon = "ion-ios-play-outline";**
media.stop();
media.release();
},null);
media.scene = $scene;
media.play();
}
else if(media){
media.stop();
media.release();
$scene.audioIcon = "ion-ios-play-outline";
}


I can update the $scene.audioIcon on the 2 click functions, which updates the button in the UI. However in the onComplete function of new Media, this function is called when the audio is finished, and the $scene audio icon changes, however it doesn't get updated in the UI.

I assume because it comes later?

Is there a way I can trigger an update of the button?

obe obe
Answer

angularjs doesn't know that it should check for changes because the completion event is called from native code. You should wrap your code in $scope.$apply().

Something like that:

media = new Media($scene.audio.src,function() {
    $scope.$apply(function() {
        $scene.audioIcon = "ion-ios-play-outline";
        media.stop();
        media.release();
    });
},null);