Question

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

如果我手动点击“清除播放列表”＆＃39;在加载第二页之前使用以下指令创建的按钮已解决此问题。

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

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

Answer 1

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

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

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);

确保已经发生了摘要周期。

如何从角度控制器中调用ngDirective？

1 个答案: