如何從角度控制器中調用ngDirective？

我正在寫一個應用程序，使用angular-soundmanager2從soundcloud播放曲目。它可以工作，但是當我播放第二首曲目時，第一首曲目會在第二首曲目之前再次播放。如何從角度控制器中調用ngDirective？

如果我在加載第二頁之前手動單擊使用以下指令創建的「清除播放列表」按鈕，則解決此問題。

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

我如何將這個指令稱爲角度控制器？

來源

2016-08-23 Keith John Hutchison

這是一個非常棘手的問題，可以通過多種方式解決（服務共享一個對象，在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);

，以確保消化週期已經發生。

來源

2016-08-23 10:08:48 Luxor001

該指令來自angular-soundmanager2庫。如果指令無法改變，你將如何處理盧克索？ –

包裹所有反映原始指令事件的另一個（你的）指令。 – Luxor001

非常酷，謝謝:-) –

如何從角度控制器中調用ngDirective？

回答

相關問題