refactoring $rootScope.$apply in Angular

Question

my MusicPlayer.js Angular service has a callback function wrapped in $rootScope.$apply that updates a specific object (musicPlayer.currentPlaybackTime) and is shared to all other controllers ( via applying to $rootScope).

I understand that you'll ideally want to limit any $rootScope pollution, so i'm looking at possible refactoring options that take away calling apply methods to $rootScope but allows my updated object to be shared across multiple controllers.

My research indicates that i'll need to register the other controllers (i.e. PlayerDashboardCtrl.js, PlaylistCtrl.js and AlbumListCtrl.js) that need my currentPlaybackTime object, but i'd like to understand what's the most efficient way of doing this.

Thank you.

 var setSong = function(song) {

    currentBuzzObject = new buzz.sound(song.audioUrl, {
        formats: ['mp3'],
        preload: true
    });

    currentBuzzObject.bind('timeupdate', function() {
        $rootScope.$apply(function() {
          musicPlayer.currentPlaybackTime = currentBuzzObject.getTime();  
        });
    });

    musicPlayer.currentSong = song;
};

score 1 · Answer 1 · edited May 23 '17 at 11:52

The best way to share data between controllers is to make a service/factory and get data using these service from whichever controller you want. You will have to inject this service in all the controllers where you want to access them.

This egghead video will give you a clear understanding: Share data between controllers

Stackoverflow question similar to this: Stackoverflow answers to sharing data between controllers.

Live Demo: Fiddle to show data sharing.

refactoring $rootScope.$apply in Angular

1 Answers1