Toggling play / pause button using a directive in ionic / angular

Issue

I want to toggle a play / pause button in ionic using a directive, based on the value of

$scope.autoplay

In the HTML I have the button element:

<playbtn></playbtn>

The button is an Ionic icon.

Play button: <i class="ion-ios-play"></i>

Pause button: <i class="ion-ios-pause"></i>

How should this directive be changed to toggle the icon ?

.directive('playbtn', function() {
  return {
    restrict: 'E',
    template: '<i class=""></i>',
    link: function(scope,element,attrs) {
      if(scope.autoplay == 'true') {
       //show pause button

      } else {
       //show play button
      }
    };    
  } 
})

Solution

You can use ng-class like so:

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

Here's a working fiddle.

Answered By - miensol