如何从 angular 控制器中调用 ngDirective？

Question

我正在编写一个使用 angular-soundmanager2 从 soundcloud 播放曲目的应用程序。它可以工作，但是当我播放第二首曲目时，第一首曲目会在第二首曲目之前再次播放。

如果我在加载第二页之前手动单击使用以下指令创建的 'Clear Playlist' 按钮，则此问题已解决。

<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。基本上我想先清除播放列表，然后添加新曲目。

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

Answer 1

这个问题非常棘手，可以通过多种方式解决（服务共享对象、根范围内的事件……）。

我个人会这样做：首先，在您的指令中放置一个带有变量的独立作用域

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>

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

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

确保摘要循环已经发生。

如何从 angular 控制器中调用 ngDirective？

How to call a ngDirective from within an angular controller?

javascript

soundmanager2

angularjs