使用离子/角度指令切换播放/暂停按钮

Question

我想根据

的值，使用指令在离子中切换播放/暂停按钮

if(isset($_POST['type']) && $_POST['type'] == 'alarmcode' ){
    $id = $_POST['id'];
    $query = "SELECT id, alarmcode FROM customers WHERE id =$id";
    $result = mysqli_query($db->con, $query);
    $data = mysqli_fetch_assoc($result);
    $alarmcode = '';
    if(!empty( $data )){
        $alarmcode = isset($data['alarmcode'])? $data['alarmcode']: ''; 
    }
    mysqli_close($db->con);
    echo $alarmcode;exit;
}

在HTML中我有按钮元素：

$scope.autoplay

该按钮是一个离子图标。

播放按钮：<playbtn></playbtn>

暂停按钮：<i class="ion-ios-play"></i>

如何更改此指令以切换图标？

<i class="ion-ios-pause"></i>

Answer 1

你可以这样使用ng-class：

.directive('playbtn', function() {
    return {
      restrict: 'E',
      scope: {autoplay:'='},
      template: '<i ng-class="{\'ion-ios-play\': autoplay, \'ion-ios-pause\': !autoplay}"></i>'
    }
})

这是working fiddle。