更改播放/停止按钮angularjs

Question

我正在尝试进行基本的播放停止控制

当我单击播放按钮时，我希望它更改为停止按钮。反之亦然。此代码正在工作，但它刷新了丑陋。播放按钮隐藏之前停止按钮显示。反之亦然。任何想法？

在HTML

<div style="margin-top: 1%;margin-left: 10%"> 

<button class="media-object button-icon ion-ios-play botonesPlayStop" ng-show="playVisible" 
ng-click="btnReproducirAudio()"></button> 

<button class="media-object button-icon ion-stop botonesPlayStop" ng-hide="playVisible" 
ng-click="detenerAudio()"></button> 

在JS

var ruta= "/android_asset/www/sounds/beep.amr"; 
$scope.audiofile = new Media(ruta); 

$scope.detenerAudio = function() { 
     $scope.audiofile.stop(); 
     $scope.playVisible=true; 

}; 

$scope.btnReproducirAudio() { 
     $scope.audiofile.play(); 
     $scope.playVisible=false; 
} 

Answer 1

使用

或ng-showng-hide存在用于更新视图的小的延迟。使用ng-if（也适用于DOM）总是更好。

另一个，也许更好，但不要太多，道：

HTML：

JS：

$scope.playOrStop = function() { 
    if($scope.playVisible){ 
     $scope.audiofile.play(); 
    }else{ 
     $scope.audiofile.stop(); 
    } 

    $scope.playVisible = !$scope.playVisible; 
};