javascript - 如何从 Angular Controller 中调用 ngDirective？

Question

我正在编写一个使用 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。 本质上我想先清除播放列表，然后添加新轨道。

如何使用 Angular Controller 调用该指令？

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>

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

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

确保已发生摘要循环。