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

Question

我正在尝试为 ngAudio 制作一个包装器组件，包装器本身将是带有控件的播放器 - 并将与 ngAudio 的功能进行交互。我遇到了一些范围问题，我可以将它注入组件的控制器并在那里访问 ngAudio，但我无法从模板范围访问它。我试过使用 $scope.ngAudio = 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" 部分（在页面的最底部）

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

Cannot access module from directive template, Angular

html

javascript

directive

angularjs