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

时间:2016-08-18 04:30:12

标签: javascript html angularjs directive

我正在尝试为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>

1 个答案:

答案 0 :(得分:5)

由于这是一个组件,你试过......

this.ngAudio = ngAudio;

不,实际上,根据文档,您希望将其设置为loadplay的结果,例如:

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

请参阅http://danielstern.github.io/ngAudio/#/docs文档中的“角度音频示例”文章 (在页面的最底部)