如何从角度控制器中调用ngDirective？(How to call a ngDirective from within an angular controller?)

如何从角度控制器中调用ngDirective？(How to call a ngDirective from within an angular controller?)

我正在编写一个应用程序，使用angular-soundmanager2播放来自soundcloud的曲目。 它有效，但是当我播放第二首曲目时，第一首曲目在第二首曲目之前再次播放。

如果我在加载第二页之前手动单击使用以下指令创建的“清除播放列表”按钮，则会解决此问题。

<div id="playDiv" ng-show="audioAvailable"> <br/> <button play-pause-toggle data-play="Play" data-pause="Pause">Play</button> <button clear-playlist>Clear Playlist</button> </div>

清除轨道的代码是使用指令创建的。

ngSoundManager.directive('clearPlaylist', ['angularPlayer', '$log', function(angularPlayer, $log) { return { restrict: "EA", link: function(scope, element, attrs) { element.bind('click', function(event) { //first stop any playing music angularPlayer.stop(); angularPlayer.setCurrentTrack(null); angularPlayer.clearPlaylist(function(data) { $log.debug('all clear!'); }); }); } }; } ]);

添加轨道的代码基本上是。

if ( data.soundcloud_track ) { SC.stream( '/tracks/' + data.soundcloud_track.id , function( sm_object ){ var track = { id: data.soundcloud_track.id, title: data.soundcloud_track.title, artist: data.soundcloud_track.artist, url: sm_object.url }; $rootScope.audioAvailable = true ; }) ; }

我可以访问全局ngSoundManager，soundManager和angular-soundManager。 基本上我想首先清除播放列表，然后添加新曲目。

如何使用角度控制器调用此指令？

I'm writing an application that plays tracks from soundcloud using angular-soundmanager2. It works but when I play the second track the first track is played again before the second track.

If I manually click the 'Clear Playlist' button created with the following directive before loading the second page this problem is resolved.

<div id="playDiv" ng-show="audioAvailable"> <br/> <button play-pause-toggle data-play="Play" data-pause="Pause">Play</button> <button clear-playlist>Clear Playlist</button> </div>

The code to clear the tracks is created with a directive.

ngSoundManager.directive('clearPlaylist', ['angularPlayer', '$log', function(angularPlayer, $log) { return { restrict: "EA", link: function(scope, element, attrs) { element.bind('click', function(event) { //first stop any playing music angularPlayer.stop(); angularPlayer.setCurrentTrack(null); angularPlayer.clearPlaylist(function(data) { $log.debug('all clear!'); }); }); } }; } ]);

The code to add the track is essentially.

if ( data.soundcloud_track ) { SC.stream( '/tracks/' + data.soundcloud_track.id , function( sm_object ){ var track = { id: data.soundcloud_track.id, title: data.soundcloud_track.title, artist: data.soundcloud_track.artist, url: sm_object.url }; $rootScope.audioAvailable = true ; }) ; }

I have access to globals ngSoundManager, soundManager and angular-soundManager. Essentially I'd like to clear the playlist first, then add the new track.

How would I call this directive with the angular controller?

最满意答案

这个非常棘手，可以通过多种方式解决（服务共享一个对象，在根本上的事件......）。

我个人会这样做：首先，在你的指令上放置一个带变量的隔离范围

restrict: "EA", scope:{ shareObj: '=' } link: function(scope, element, attrs) { scope.shareObj = angularPlayer.clearPlaylist; }

并分享您希望从外部访问范围变量的函数。

然后，在你的controllerJS中：

$scope.shareObj = {}; $scope.clicked = function(){ $scope.shareObj(); //you are calling the directive function, ha! }

和你的HTML：

<clear-playlist share-obj="shareObj"> </clear-playlist>

请注意，您必须确保已执行控制器的链接功能（从而创建了功能）。 如果你将指令注入dom并立即需要执行该函数，它可能不起作用：在这种特殊情况下，将$ scope.share（）调用包装在一个

$timeout(function(){ $scope.share() }, 0);

确保消化周期已经发生。

This one it's pretty tricky and can be resolved in many ways (service sharing an object, event on the rootscope..).

I would go this way, personally: first of all, put an isolated scope with a variable on your directive

restrict: "EA", scope:{ shareObj: '=' } link: function(scope, element, attrs) { scope.shareObj = angularPlayer.clearPlaylist; }

and share your function you want to be accessible from external to a variable of the scope.

Then, in your controllerJS:

$scope.shareObj = {}; $scope.clicked = function(){ $scope.shareObj(); //you are calling the directive function, ha! }

and your HTML:

<clear-playlist share-obj="shareObj"> </clear-playlist>

Beware, you must be sure that your link function of the controller has been executed (and thus the function created). If you inject your directive to the dom and immediately need to execute the function, it may not work: in this particular case, wrap your $scope.share() calling in a

$timeout(function(){ $scope.share() }, 0);

to be sure a digest cycle has occured.