각도 컨트롤러 내에서 ngDirective를 호출하는 방법은 무엇입니까?

Question

저는 angle-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 ; 

    }) ;  

} 

나는 globals ngSoundManager, soundManager 및 angular-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> 

당신은 컨트롤러의 당신의 연결 기능이 실행되어 있는지 확인해야합니다,주의 (따라서 함수가 생성). 확인하기 위해

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

에서 호출)이 특정 경우에, 당신의 $의 scope.share을 (포장 : 당신이 DOM에 지시어를 주입하고 즉시 기능을 실행해야 경우, 는 작동하지 않을 수 있습니다 다이제스트주기가 발생했습니다.