Question

我正在开发一个具有音乐流媒体的应用程序，我创建了一个指令并将其放在主视图中--index.html-因为我需要用户能够在他决定后停止并启动音乐。 / p>

首先，我的指示

.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();
      }

    }
  };
});

然后，我将指令放在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>

现在，我按顺序有3个观看次数：tab-news.html，tab-promotions.html，tab-signup.html。

您可以在3个视图中以及嵌套视图中看到该指令很棒，但如果用户在任何视图中调用tab-promotions.html，我会遇到playMusic()的问题，语句更改为该函数并且音乐开始，但语句永远不会更新tab-promotions，在其他视图中，您可以停止并启动音乐，并且应用程序具有正确的行为，但在选项卡中你仍然能够播放和停止音乐的促销，如果不考虑其他观点，这种观点在这个意义上独立于其他观点。

在这里很难解释自己，所以在简历中：除了标签促销之外的每个视图中，应用程序都有正确的行为，如果音乐响起，你去制表符促销你也要播放音乐该视图因此背景中将有2个声音，一个用于其他2个视图，另一个用于制表符促销。

好像我需要做一个模特或什么的。你怎么说社区？

更新

这看起来如何附着在身体上，是右边的元素

enter image description here

指令在不同观点内失败

0 个答案: