Cannot access module from directive template, Angular

Question

I’m trying to make a wrapper component for ngAudio the wrapper itself would be the player with controls - and would interact with ngAudio’s functions. I’m having some scope issues with it, I can inject it into the component’s controller and access ngAudio there, but I cannot access it from the scope of the template. I’ve tried setting ngAudio into scope using things like $scope.ngAudio = ngAudio; to no avail - if anyone has any ideas it would be awesome. I believe it will need some kind of two way binding? Or someway to generally access the ngAudio module from the directive level.

Code:

component:

.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");

  }
});

template

<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

Since this is a component, have you tried just...

this.ngAudio = ngAudio;

?

No, actually, according to docs, you want to set it to the result of load or play, like:

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

See the "Angular Audio Example" piece in the docs at http://danielstern.github.io/ngAudio/#/docs (At the very bottom of the page)