I implemented a directive including plangular experiment
Here the code:
as.directive('plangular', function ($document, $rootScope, $http) {
// Define the audio engine
var audio = $document[0].createElement('audio');
// Define the player object
var player = {
track: false,
playing: false,
paused: false,
tracks: null,
i: null,
play: function(tracks, i) {
if (i == null) {
tracks = new Array(tracks);
i = 0;
};
player.tracks = tracks;
player.track = tracks[i];
player.i = i;
if (player.paused != player.track) audio.src = player.track.stream_url + '?client_id=' + clientID;
audio.play();
player.playing = player.track;
player.paused = false;
},
pause: function() {
audio.pause();
if (player.playing) {
player.paused = player.playing;
player.playing = false;
};
},
// Functions for playlists (i.e. sets)
playPlaylist: function(playlist) {
if (player.tracks == playlist.tracks && player.paused) player.play(player.tracks, player.i);
else player.play(playlist.tracks, 0);
},
next: function(playlist) {
if (!playlist){
if (player.i+1 < player.tracks.length) {
player.i++;
player.play(player.tracks, player.i);
} else {
player.pause();
};
} else if (playlist && playlist.tracks == player.tracks) {
if (player.i + 1 < player.tracks.length) {
player.i++;
player.play(playlist.tracks, player.i);
} else {
player.pause();
};
};
},
previous: function(playlist) {
if (playlist.tracks == player.tracks && player.i > 0) {
player.i = player.i - 1;
player.play(playlist.tracks, player.i);
};
}
};
audio.addEventListener('ended', function() {
$rootScope.$apply(function(){
if (player.tracks.length > 0) player.next();
else player.pause();
});
}, false);
// Returns the player, audio, track, and other objects
return {
restrict: 'A',
scope: true,
link: function (scope, elem, attrs) {
// RESOLVE THE AUDIO
var params = { url: attrs.src, client_id: clientID, callback: 'JSON_CALLBACK' }
$http.jsonp('//api.soundcloud.com/resolve.json', { params: params }).success(function(data){
// Handle playlists (i.e. sets)
if (data.tracks) scope.playlist = data;
// Handle single track
else if (data.kind == 'track') scope.track = data;
// Handle all other data
else scope.data = data;
});
scope.player = player;
scope.audio = audio;
scope.currentTime = 0;
scope.duration = 0;
// Updates the currentTime and duration for the audio
audio.addEventListener('timeupdate', function() {
if (scope.track == player.track || (scope.playlist && scope.playlist.tracks == player.tracks)){
scope.$apply(function() {
scope.currentTime = (audio.currentTime * 1000).toFixed();
scope.duration = (audio.duration * 1000).toFixed();
});
};
}, false);
// Handle click events for seeking
scope.seekTo = function($event){
var xpos = $event.offsetX / $event.target.offsetWidth;
audio.currentTime = (xpos * audio.duration);
};
}
}
});
And here how I used it in my index.html view.
<section plangular data-src="https://soundcloud.com/a-beautiful-place-1/the-stoners-guide-to-the-galaxy" class="measure-wide wrap mb4">
<div>
<div class="controllButton">
<a href ng-click="player.play(track)" ng-hide="player.playing == track" class="button button-geo anim-popin">
<div class=""><img src="lib/player_js/icons/play.png" /></div>
</a>
<a href="" ng-click="player.pause()" ng-show="player.playing == track" class="button button-geo anim-popin">
<div> <img src="lib/player_js/icons/pause.png" /> </div>
</a>
</div>
<div class="controllScrobbler">
<div class="absolute t0 r0 b0 l0 seekHolder" >
<div class=" t0 r0 b0 l0 overlaySeeker" ng-click="seekTo($event)"></div>
<div class=" t0 b0 l0 seeker" style="width: {{ (currentTime / duration) * 100 }}%"></div>
<div class=" t0 r0 b0 l0 bg-white"></div>
</div>
</div>
</div>
</section>
Now, it works perfectly. What I would like to do is to interact with the object player within the directive from different controllers. The controllers are loaded in the partials of different pages. There is no scope sharing between the directive and the other controllers.
I'm looking to something like scope.plangular.player.MyFunctionInsideTheDirective(my args)
Is it possible? Something like the directive is a service, and the controllers are interact with that.
Any ideas?