Question

我最近开始学习Angular.js，我试图不以错误的方式使用框架，并在以后引起自己的问题。

我现在感到困惑的是，我正在尝试使用jQuery插件MediaElement.js，而且我不清楚最优雅的集成方式是什么。到目前为止，我所尝试的一切都不太合适，当我能够使它工作时，我仍然无法从应用程序的其他部分控制插件。

我一直在尝试以下两种方法：

1）创建一个指令。然后该指令的链接函数包含对该函数的调用，该函数将该元素转换为具有标准控件的媒体播放器，如下所示：

$(element).mediaelementplayer();

这种做法的主要问题是，尽管我可以方便地创建媒体播放器控件，但我看不出如何使用应用程序控制它 - 我希望能够控制从我的其他地方播放应用程序。

2）另一种方法是在控制器中创建一个新的MediaElementPlayer对象并将其添加到范围对象中。

$scope.player = new MediaElementPlayer();

通过这样做，我认为我应该能够通过调用对象上的相关方法来控制回放。但这似乎是错误的 - 使用指令似乎更有意义，以便我可以重用它。此外，如果我这样做，那么你无法看到播放控件和播放进度条，你可以使用第一个解决方案。

最好的方法是什么？有没有办法使用我描述的第一种方法创建播放器，然后通过分配对范围的引用从主控制器控制它？是否有更好的方法完全实现这一目标？

任何提示都会非常感激 - 我花了几个小时试图让事情有效。

由于

Answer 1

我最近开始学习Angular.js而我正试图不使用框架以错误的方式，并在以后引起自己的问题。

如果是这种情况，则不应使用jQuery插件。

Angular旨在解决由jQuery引起的许多问题（即代码意大利面。）

而不是jQuery插件，你应该实现适当的角度插件。

对于音频，有ng-audio。

https://github.com/danielstern/ngAudio

免责声明：我是ng-audio的主要撰稿人

Answer 2

您的指令应该设置它所侦听的事件，例如播放，暂停等。然后应用程序的其他部分可以$播放这些事件（可能在$ rootScope上）

function link(scope, iElement, iAttrs) {
  var player = $(iElement).mediaelementplayer();

  var deregisterPlay = scope.$on('media:play', function() {
    player.play();
  }
  //etc.

  iElement.on('$destroy', function() {
    deregisterPlay();
  }
}

在Angular应用程序中集成jQuery插件的最优雅方法是什么？

2 个答案: