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>

Lanfranc

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)

Lisalisabet

Thanks! Just put this in and still no look with the bindings in the template. It's showing as undefined within the HTML of the template. – Lanfranc

The ngAudio here is the service not the directive, and what you are trying to access is actually the result of the play call, so, I think you should assign to that. I updated the answer, have a look at the added link too. – Lisalisabet

Thank you! You were right, I was referring to the service as opposed to an instance of it. Have a great day :) – Lanfranc