我正在尝试为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>
答案 0 :(得分:5)
由于这是一个组件,你试过......
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文档中的“角度音频示例”文章 (在页面的最底部)