Directive failing within different views

ionic-v1
1

I am developing an app which has an streaming for music, I created a directive and put it in the main view -index.html- because I need that the user be able to stop and start the music once he decide.

So, first, my directive

    .directive('audioPlay', function() {
      return {
        restrict: 'E',
        link: function(scope, element, attr) {
    
          scope.playOrPause = true;
    
          var player = element.children('.player')[0];
    
          scope.playMusic = function() {
            scope.playOrPause = false;
            player.play();
          }
    
          scope.stopMusic = function() {
            scope.playOrPause = true;
            player.pause();
          }
    
        }
      };
    });

then, I put the directive in index.html

      <body ng-app="urbanet.app">
        <ion-nav-bar>
          <ion-nav-back-button>
          </ion-nav-back-button>

          <ion-nav-buttons side="right">

            <audio-play> <!-- HERE STARTS -->
              <audio class="player">
                <source src="http://fire.wavestreamer.com:9711/UrbanetRadio"/>
              </audio>
              <button class="button button-clear"
                      ng-click="playMusic()"
                      ng-hide="!playOrPause">
                <i class="fa fa-play fa-lg"></i>
              </button>
              <button class="button button-clear"
                      ng-click="stopMusic()"
                      ng-show="!playOrPause">
                <i class="fa fa-pause fa-lg"></i>
              </button>
            </audio-play> <!-- HERE ENDS -->

          </ion-nav-buttons>

        </ion-nav-bar>
        <ion-nav-view></ion-nav-view>
      </body>

now, I have 3 views in this order: tab-news.html, tab-promotions.html, tab-signup.html.

You are able to see the directive in the 3 views and also in the nested views which is awesome, but I have an issue with the tab-promotions.html, if the user call playMusic() in any view, the statement changes to that function and the music starts, but the statement never updates in the tab-promotions, in the other views you can stop and start the music once you want and the app has the proper behavior, but in the tab promotions you are still able to play and stop the music without taking care if the other views, this view is independent of the other views in that sense.

It is hard to explain myself here, so in a resume: in every view except tab-promotions, the app has the proper behavior, if the music is sounding and you go to tab-promotions you are to play music also in that view so there will 2 sounds in the background, one for the other 2 views and 1 different for tab-promotions.

It seems as if I need to do a model or something. What do you say community ?

2

You might need to isolate the scope in your directive definition or define a new scope with scope:true if that helps (I am not sure though).
So your directive would look like:

.directive('audioPlay', function() {
    return {
        restrict: 'E',
        scope: {},   // or you can try scope: true
        link: function(scope, element, attr) {
    
          scope.playOrPause = true;
    
          var player = element.children('.player')[0];
    
          scope.playMusic = function() {
            scope.playOrPause = false;
            player.play();
          }
    
          scope.stopMusic = function() {
            scope.playOrPause = true;
            player.pause();
          }
    
        }
     };
  });

https://docs.angularjs.org/api/ng/service/$compile