2016-08-18 90 views
8

我試圖做一個包裝組件ngAudio包裝本身將是控制器的玩家 - 並且會與ngAudio的函數進行交互。我遇到了一些問題,我可以將它注入組件的控制器,並在那裏訪問ngAudio,但我無法從模板的範圍訪問它。我已經嘗試使用$scope.ngAudio = ngAudio;之類的東西將ngAudio設置爲範圍,但無濟於事 - 如果有人有任何想法,那將是非常棒的。我相信它需要某種雙向綁定?或者通常從指令級訪問ngAudio模塊。無法從指令模板訪問模塊,Angular

代碼:

組件:

.component('player', { 
    // isolated scope binding 
 bindings: { 
   genre: '=', 
   track: '=', 
   ngAudio: '<' 
 }, 

 templateUrl : '/templates/player-directive-template.html', 

 // The controller that handles our component logic 
 controller : function($scope, ngAudio) { 

   //tried: 
   //$scope.ngAudio = ngAudio; 
   ngAudio.play("https://api.soundcloud.com/tracks/167999916/stream?client_id=123456576789"); 

 } 
}); 

模板

<div class="container" id="player"> 

 <button class='btn btn-primary' ng-click='ngAudio.paused ? ngAudio.play() : ngAudio.pause()'>{{ngAudio.paused ? "Play" : "Pause" }}</button> 
</div> 

回答

5

由於這是一個組件,你有沒有嘗試過...

this.ngAudio = ngAudio; 

不,實際上,根據文檔,你想將它設置爲loadplay結果,如:

this.audio = ngAudio.play("https://api.soundcloud.com/tracks/167999916/stream?client_id=123456576789"); 

看到文檔的「角音頻示例」部分在http://danielstern.github.io/ngAudio/#/docs (在頁面的最底部)

+0

謝謝!只需將其放入模板中,並且仍然不會看到模板中的綁定。它在模板的HTML中顯示爲未定義。 –

+1

ngAudio這裏的服務不是指令,你試圖訪問的實際上是'play'調用的結果,所以我認爲你應該指定這個。我更新了答案,也查看了添加的鏈接。 – Meligy

+1

謝謝!你是對的,我指的是服務而不是它的一個實例。祝你有美好的一天 :) –