javascript - addEventListener and angularjs promise : wrap it up -

i trying wrap head around on drawing line between event listeners/handlers , resolution of promise angularjs.

i'm using preloadjs in angularjs service dealing audio.
service used dependency service needs able perform actions once files have been preloaded (hence use of promise).

but have no clue left on how wrap together...

so, classical bit of code :

// event handlers audio.queue.addeventlistener('fileload', function(event) {   console.log('charging file', event);   // things while loading (.notify) });  audio.queue.addeventlistener('complete', function(event) {   console.log('file loaded', event);   // things once it's loaded (.resolve) });  audio.queue.addeventlistener('error', function(event) {   console.log('error while charging file', event);   // things in case of error (.reject) });  // preload file audio.queue.loadfile({id: 'test', src: 'test.mp3'}); 

what ?
a. $q.all on array of promises fed 3 callbacks ?
b. have no b...

any or leads appreciated

edit:

in response c14l answer. let's admit have :

var file1 = 'test.mp3' //file exists var file2 = 'azepsl.mp3' //file doesnt exist var file3 = 'test2.mp3' //file exists 

with c14l code got 3 promises rejected because of 1 file doesn't exist.
if use plain old eventhandler shown above, got 2 success events , 1 failure (which pretty normal).

what cause of issue ?
because of several eventlisteners added audio.queue ?

looks fileload fires during file download, not needed if want handle file after download. need complete , error. wrap in promise

function download_me_stuff(){   audio.queue.loadfile({id: 'test', src: 'test.mp3'});    return new promise(function (resolve, reject) {     audio.queue.addeventlistener('complete', function(event) {       console.log('file loaded', event);       resolve(event);     });     audio.queue.addeventlistener('error', function(event) {       console.log('error while charging file', event);       reject(event);     });   } } 

now thenable

download_me_stuff().then(     function do_me_things (event) {       // ...     },     function handle_me_error (event) {        // ...     } ); 

was asked for? may have misunderstood.

---

edit:

i had @ fileload spec , looks event fired every time 1 individual file queue finished loading successfully.

audio.queue.addeventlistener('fileload', function(event) {   console.log('one more file loaded', event); }); 

while complete event fired once all files loaded successfully. in example, loading 1 file, lets use 3 files. added file queue

audio.queue.loadfile({id: 'test1', src: 'test1.jpg'}); audio.queue.loadfile({id: 'test2', src: 'test2.jpg'}); audio.queue.loadfile({id: 'test3', src: 'test3.jpg'}); 

you want react every time single file has loaded , stuff 1 file. while wrap individual promises, complicate stuff. better define callback

audio.queue.addeventlistener('fileload', onesinglefileloaded);  function onesinglefileloaded(event) {   var id = event.item.id; // 'id' of item loadfile() above   var type = event.item.type;    if (type == createjs.loadqueue.image) {     document.getelementbyid('#'+id).appendchild(event.result);   } } 

the other 2 events convenience, let know if entire queue loaded or not. not important in cases

audio.queue.addeventlistener('complete', function(event) {   alert('wohooo, downloaded successfully!') });  audio.queue.addeventlistener('error', function(event) {   alert("well, didn't work. hit [f5] , try again!"); });