Как вызвать ngDirective из углового контроллера?

Question

Я пишу приложение, которое воспроизводит треки из soundcloud с помощью angular-soundmanager2. Это работает, но когда я играю второй трек, первый трек воспроизводится снова перед вторым треком.

Если я вручную нажму кнопку "Очистить плейлист", созданную с помощью следующей директивы, перед загрузкой второй страницы, эта проблема будет решена.

<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

Это довольно сложно и может быть решено разными способами (служба, совместно использующая объект, событие в корневом каталоге...).

Я бы пошел по этому пути лично: прежде всего, поместите изолированную область видимости с переменной в вашей директиве

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

и поделитесь своей функцией, которую вы хотите, чтобы она была доступна извне для переменной области.

Затем в вашем контроллере JS:

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

чтобы убедиться, что произошел цикл дайджеста.