Phil Hudson Phil Hudson - 1 year ago 53
AngularJS Question

Cannot access module from directive template, Angular

I’m trying to make a wrapper component for

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
there, but I cannot access it from the scope of the template. I’ve tried setting
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.



.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) {

   //$scope.ngAudio = ngAudio;"");



<div class="container" id="player">

 <button class='btn btn-primary' ng-click='ngAudio.paused ? : ngAudio.pause()'>{{ngAudio.paused ? "Play" : "Pause" }}</button>

Answer Source

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: ="");

See the "Angular Audio Example" piece in the docs at (At the very bottom of the page)