javascript - 通过angular js处理JavaScript插件

我是AngularJS的新手。我正在通过AngularJS开发音乐应用。

对于HTML5播放器，我使用的是https://github.com/DIYgod/APlayer。

如何在角内包裹aplyer，所以我只调用指令来初始化播放器。

前球员

<div id="player1" class="aplayer"></div>

var ap = new APlayer({
    element: document.getElementById('player1'),                       // Optional, player element
    narrow: false,                                                     // Optional, narrow style
    autoplay: true,                                                    // Optional, autoplay song(s), not supported by mobile browsers
    showlrc: 0,                                                        // Optional, show lrc, can be 0, 1, 2, see: ###With lrc
    mutex: true,                                                       // Optional, pause other players when this player playing
    theme: '#e6d0b2',                                                  // Optional, theme color, default: #b7daff
    mode: 'random',                                                    // Optional, play mode, can be `random` `single` `circulation`(loop) `order`(no loop), default: `circulation`
    preload: 'metadata',                                               // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
    listmaxheight: '513px',                                             // Optional, max height of play list
    music: {                                                           // Required, music info, see: ###With playlist
        title: 'Preparation',                                          // Required, music title
        author: 'Hans Zimmer/Richard Harvey',                          // Required, music author
        url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',  // Required, music url
        pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg',  // Optional, music picture
        lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'                   // Optional, lrc, see: ###With lrc
    }
});

我正在尝试通过指令使用它并将模板传递为

<div id="player1" class="aplayer"></div>

但我不知道如何将Aplayer JS添加到Angular。

最佳答案

您可以通过这种方式在指令中初始化APlayer。

使用<div class="aplayer"></div>或<div aplayer></div>

  在html代码中使用kebab-case声明属性，但是您必须使用camelCase在指令代码中访问它们。

  注意：此处不需要data前缀。它仅用于防止本机html属性冲突。

(function() {
  'use strict';

  angular.module('app', []);

  angular
    .module('app')
    .directive('aplayer', aplayer);

  function aplayer() {
    return {
      restrict: 'AC',
      link: function(scope, element, attrs) {
        // `element` is the angular element the directive is attached to
        // APlayer need the native one
        var nativeElement = element[0];
        var ap1 = new APlayer({
          element: nativeElement,
          narrow: false,
          autoplay: true,
          showlrc: false,
          mutex: true,
          theme: '#e6d0b2',
          preload: 'metadata',
          mode: 'circulation',
          music: {
            title: attrs["playerTitle"],
            author: attrs["playerAuthor"],
            url: attrs["playerUrl"],
            pic: attrs["playerPic"]
          }
        });
        ap1.on('play', function() {
          console.log('play');
        });
        ap1.on('play', function() {
          console.log('play play');
        });
        ap1.on('pause', function() {
          console.log('pause');
        });
        ap1.on('canplay', function() {
          console.log('canplay');
        });
        ap1.on('playing', function() {
          console.log('playing');
        });
        ap1.on('ended', function() {
          console.log('ended');
        });
        ap1.on('error', function() {
          console.log('error');
        });

      }
    };
  }

})();

<!doctype html>

<html lang="en" ng-app="app">

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.6.0/APlayer.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div class="aplayer"
       data-player-title="Preparation"
       data-player-author="Hans Zimmer/Richard Harvey"
       data-player-url="http://devtest.qiniudn.com/Preparation.mp3"
       data-player-pic="http://devtest.qiniudn.com/Preparation.jpg"></div>
</body>

</html>