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

Question

我正在尝试为包装ngAudio器本身创建一个包装器组件,它将是具有控件的播放器 - 并且将与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;

？

不,实际上,根据文档,您希望将其设置为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"文章 (位于页面底部)