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

Как я могу назвать эту директиву угловым контроллером?

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> 

Берегитесь, вы должны быть уверены, что ваша ссылка функция контроллера была выполнена (и, следовательно, функция, созданная). Если впрыснуть вашу директиву йота и немедленно нужно выполнить функцию, она может не работает: в данном конкретном случае, оберните $ scope.share() вызова в

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

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