無法從指令模板Angular訪問模塊

Question

我正在嘗試為ngAudio創建包裝器組件，包裝器本身將是具有控件的播放器-並與ngAudio的功能進行交互。 我遇到了一些范圍問題，可以將其注入組件的控制器中並ngAudio那里訪問ngAudio ，但是我無法從模板的范圍訪問它。 我試過使用$scope.ngAudio = ngAudio;將ngAudio設置為作用域$scope.ngAudio = ngAudio; 無濟於事-如果有人有任何想法，那就太好了。 我相信它將需要某種兩種方式的綁定？ 或以某種方式通常從指令級別訪問ngAudio模塊。

碼：

零件：

.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>

Answer 1

由於這是一個組件，您是否嘗試過...

this.ngAudio = ngAudio;

？

不，實際上，根據docs，您要將其設置為load或play的結果，例如：

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

請參閱位於http://danielstern.github.io/ngAudio/#/docs的文檔中的“角度音頻示例”（位於頁面的最底部）