Javascript 使用ui路由器多次调用AngualrJS指令

我有一个HTML音频播放器，作为AngularJS指令的一部分调用。页面刷新后，播放器工作正常-我可以设置源代码并播放音频-控制台记录如下： 但是，如果我在应用程序中导航到另一个状态，然后加载/播放音频，则会有两个音频实例开始播放。如果我在播放前访问4个状态，将播放4个音频实例！控制台会记录以下内容：

为什么音频播放器被反复启动？在州与州之间移动时，如何使其保持活动状态？我不想在每次更改状态时破坏它并重新初始化它，这会中断音频播放。

这是相关代码。实际上，view footer.html包含指令和播放器，并且被每个状态包含

index.html：

  ...
  <div style="clear:both"></div>

  <div ui-view="footer"></div>
</body>

footer.html

    <div class="audioplayer">
      <!-- Audio Player -->
      <hls-player id="player" playlist="{{ap.tracks}}"></hls-player>
...

playerTemplate.html

...
 <audio autobuffer preload="metadata" src="" id="radio" class="hidden" preload="none"></audio>
...

。。。
...

更改状态时，AngularJS会再次初始化控制器。指令

hlsPlayer

与控制器的作用域相同。因此，

link

再次被调用

您可以使用“$destroy”上的

$优雅地完成指令的工作以停止播放器

element.on('$destroy', function () {
     // stop/destroy here the player
});


作为补充说明，我建议您使用该服务来存储播放器实例，并避免将播放器初始化为指令之类的事情
我的解决方案是将HTML5播放器本身从指令模板中移出，并将其放在main index.html页面中，这在任何情况下都不起作用。
这对于Angular中的持久音频非常有效，我仍然可以像以前一样通过引用音频元素来加载、控制和显示时间线。例如：

index.html：

<audio id="mediaPlayer" autobuffer preload="metadata" src="" id="radio" class="hidden" preload="none"></audio>

playerTemplate.html（使用指令中的$scope变量和函数操作播放器）

谢谢您的解释。问题是，如果我破坏了播放器，音频将停止，不再持续。服务理念可能是必要的
element.on('$destroy', function () {
     // stop/destroy here the player
});

<audio id="mediaPlayer" autobuffer preload="metadata" src="" id="radio" class="hidden" preload="none"></audio>

return {
    restrict: 'AE',
    link: function ($scope, element, attrs) {
 $templateRequest("views/playerTemplate.html").then(function (html) {
            var template = angular.element(html);

            element.html(template);
            $compile(element.contents())($scope);

            var elem = angular.element(document.querySelector('#mediaPlayer'));
            var audio = elem[0];

            $scope.play = function () {               
                    audio.play();
                }

<a type="button" ng-click="played=!played; played ? play() :stop();"><i
                ng-class="played?'nav-btn-play fa fa-pause-circle-o':'nav-btn-play fa fa-play-circle-o'"></i></a>