更改播放按钮以在Angular中暂停，反之亦然

Question

我正在尝试使用Soundcloud流媒体进行基本的播放暂停控制。

我有一个单击播放按钮和声音流的部分。

<img class="media-object img-rounded img-responsive"  src="/images/play_button.png" alt="playbutton" height="40px" width="40px" ng-click="streamTrack(show.stream_url)">

该位的控制器如下所示

$scope.streamTrack = function (stream_url) {
    console.log(stream_url);
    SC.stream(stream_url, function(sound){
    sound.play();
  });

当我点击按钮时，我希望它更改为暂停按钮。然后当你点击暂停按钮时，我会将其设置为发出声音。暂停或声音。停止。

在Angular中更改按钮和相应点击事件的最佳方法是什么？

Answer 1

在你的标记中试试这个：

<img class="media-object img-rounded img-responsive"  src="/images/play_button.png" alt="playbutton" height="40px" width="40px" ng-click="streamTrack(show.stream_url)" ng-hide="isStreaming">
<img class="media-object img-rounded img-responsive"  src="/images/pause_button.png" alt="pausebutton" height="40px" width="40px" ng-click="stopTrack(sound)" ng-show="isStreaming">

在JS中：

$scope.streamTrack = function (stream_url) {
    console.log(stream_url);
    SC.stream(stream_url, function(sound){
      $scope.sound = sound;
      sound.play();
    });

    $scope.isStreaming = true;
}

$scope.stopTrack = function (sound) {
    sound.pause()

    $scope.isStreaming = false;
}

Answer 2

考虑在按钮中使用ng-src。

<img ... ng-src="playPauseButton" ...>

然后在您的控制器中，定义一个指定src的范围变量。

$scope.streamTrack = function(){
  ...
  $scope.playPauseButton="/pathtopausebutton.png"
}
$scope.stopStreaming = function(){
  ...
  $scope.playPauseButton="/pathtoplaybutton.png"
}

$scope.playPauseButton="/pathtoplaybutton.png"