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

Я пишу приложение, которое воспроизводит треки из звукового облака, используя 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. По сути, я хотел бы сначала очистить список воспроизведения, а затем добавить новый трек.

Как бы я назвал эту директиву с помощью контроллера angular?


javascript angularjs soundmanager2
person Keith John Hutchison    schedule 23.08.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

Лично я бы пошел по этому пути: во-первых, поставить изолированный скоуп с переменной на вашу директиву

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

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

person Luxor001    schedule 23.08.2016
comment
Директива взята из библиотеки angular-soundmanager2. Если бы директиву нельзя было изменить, как бы вы справились с ней, Луксор? - person Keith John Hutchison; 23.08.2016
comment
оберните вокруг другой (вашей) директивы, которая отражает события исходной директивы. - person Luxor001; 23.08.2016