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访问模块

1 个答案: