Phil Hudson Phil Hudson - 3 months ago 7
AngularJS Question

Cannot access module from directive template, Angular

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

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)

Comments