javascript - 无法从指令模板 Angular 访问模块

Question

我正在尝试为 ngAudio 制作一个包装器组件，包装器本身将是带有控件的播放器 - 并将与 ngAudio 的功能进行交互。我遇到了一些范围问题，我可以将它注入(inject)组件的 Controller 并在那里访问 ngAudio，但我无法从模板范围访问它。我试过使用 $scope.ngAudio = ngAudio; 之类的东西将 ngAudio 设置到作用域中，但无济于事 - 如果有人有任何想法，那就太棒了。我相信它需要某种双向绑定(bind)？或者以某种方式从指令级别访问 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;

?

不，实际上，根据文档，您想将其设置为 load 或 play 的结果，例如:

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

请参阅 http://danielstern.github.io/ngAudio/#/docs 文档中的“Angular Audio Example”部分(在页面的最底部)