使用 ui-router 多次调用 AngularJS 指令答案

【问题标题】：AngualrJS directive called multiple times using ui-router使用 ui-router 多次调用 AngularJS 指令
【发布时间】：2023-04-03 07:01:01
【问题描述】：

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

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

这里是相关代码。本质上，视图 footer.html 包含指令和播放器，并且被每个状态所包含。

index.html：

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

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

app.js：

.state('audiolist', {
      url: '/audiolist/',
      views: {
        sideNav: {
          templateUrl: 'views/sideNav.html',
          controller: 'sideNavController'
        },
        header: {
          templateUrl: 'views/header.html',
          controller: 'headerController'
        },
        content: {
          templateUrl: 'views/list.main.html',
          controller: 'listController as content'
        },
        footer: {
          templateUrl: 'views/footer.html',
          controller: 'apController as ap'
        }
      })
    ...
    .state('saveditems', {
      url: '/saveditems/',
      views: {
        sideNav: {
          templateUrl: 'views/sideNav.html',
          controller: 'sideNavController'
        },
        header: {
          templateUrl: 'views/header.html',
          controller: 'headerController'
        },
        content: {
          templateUrl: 'views/saveditems.main.html',
          controller: 'savedItemsController as content'
        },
        footer: {
          templateUrl: 'views/footer.html',
          controller: 'apController as ap'
        }
      }
...

页脚.html

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

指令/hlsPlayer.js

module.directive('hlsPlayer', function ($window, $templateRequest, $compile, $http, $rootScope) {
return {
    restrict: 'AE',
    link: function ($scope, element, attrs) {
        $templateRequest("views/playerTemplate.html").then(function (html) {
        // player functions 
        ... 
        // play function 
           ...
           console.log("manifest loaded, found " + data.qualities + " quality level");
           console.log("audio loaded and playing");
    ...

playerTemplate.html

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

【问题讨论】：

标签： javascript angularjs angular-ui-router html5-video html5-audio

【解决方案1】：

当你改变状态时，AngularJS 会再次初始化控制器。指令hlsPlayer 与控制器具有相同的范围。所以link 又被调用了。

您可以使用$on "$destroy" 优雅地完成指令的工作以停止播放器。

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

作为旁注，我建议您使用该服务来存储播放器实例，并避免将播放器初始化为指令之类的事情

【讨论】：

感谢您的解释。问题是如果我销毁播放器，音频将停止并且不再持续存在。服务理念大概是必要的

【解决方案2】：

我的解决方案是把 HTML5 播放器本身从指令模板中移出，并将其放置在 index.html 主页面中。这适用于 Angular 中的持久音频，我仍然可以像以前一样通过引用该音频元素来加载、控制和显示时间线。例如：

index.html：

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

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

<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>

【讨论】：