通过 Angular js 处理 JavaScript 插件答案

【问题标题】：handle JavaScript plugin through angular js通过 Angular js 处理 JavaScript 插件
【发布时间】：2017-05-08 17:29:22
【问题描述】：

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

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

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

前-初始玩家

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

【问题讨论】：

标签： javascript angularjs html angularjs-directive

【解决方案1】：

您可以通过这种方式在指令中初始化 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>

【讨论】：

不客气。我添加了一些代码来展示如何使用元素属性作为播放器参数。
嗨 stej4n 你能指导我如何通过 json 给 APlayer 音乐参数。或者点击一个按钮，APlayer 应该会播放由 json API 获取的音乐。基本上是动态添加从 json 获取的音乐参数
@MihirKumarThakur 在这里查看我的答案stackoverflow.com/questions/43931310/…