我实施了包含plangular实验的指令
这里是代码:
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);
};
}
}
});
这是我在index.html视图中使用它的方法。
<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>
现在,它完美无缺。我想做的是与来自不同控制器的指令内的对象播放器进行交互。控制器加载在不同页面的部分中。指令与其他控制器之间没有范围共享。
我期待scope.plangular.player.MyFunctionInsideTheDirective(my args)
之类的事情
可能吗?像指令这样的服务,控制器与之交互。
有什么想法吗?