オーディオが終了したらボタンを隠す

Question

オーディオファイルが終了するとすぐに一時停止ボタンを非表示にしたい。 このコードが動作しない理由はわかりません。

再生ボタンは起動しません。オーディオが再生されると、オーディオボタンがポーズボタンになります。ただし、オーディオが終了した後も一時停止ボタンは保持されます。

私の間違いはありますか？

<audio id="audio"> 
    <source src="../audio/audio.mp3" type="audio/mpeg"> 
</audio> 
<img ng-click="playAudio()" src="../audio/play.jpg" alt="" ng-hide="!pause"> 
<img ng-click="pauseAudio()" src="../audio/pause.jpg" alt="" ng-hide="pause"> 

とコントローラ：

.controller('AudioCtrl', function($scope, $http) { 

    var vid = document.getElementById("audio"); 
    vid.onended = function() { 
    $scope.pause = true; 

    }; 
    $scope.pause = true; 

    $scope.playAudio = function() { 
     vid.play(); 
     $scope.pause = false; 
    } 

    $scope.pauseAudio = function() { 
     vid.pause(); 
     $scope.pause = true; 
    } 

}) 

Answer 1

$apply()は、角度の枠組みの外からの角度で式を実行するために使用されます。 （たとえば、ブラウザDOM events、setTimeout、XHRまたはサードパーティのライブラリから）。角度フレームワークを呼び出すため、scope life cycleのexception handling、executing watchesを正しく実行する必要があります。

VideoElement.onendedは、Angularのコンテキストで呼び出されていません。 modelをangular-contextの外に変更する場合は、$apply()を手動で呼び出すことで、変更に関する角度を知らせることになります。

それはあなたには、いくつかのmodelsを変更すると、変更が正しく伝播するように、それはwatchersを発射すべきことAngularを伝えるようなものです。Reference

vid.onended = function() { 
    $scope.$apply(function() { 
    console.log('Here'); 
    $scope.pause = true; 
    }); 
}; 

Answer 2

はあなたが試すことができ：

.controller('AudioCtrl', function($scope, $http, $timeout) { 

    var vid = document.getElementById("audio"); 
    vid.onended = function() { 
    $timeout(function(){ 
     $scope.pause = true; 
    }, 0); 
    };