How to interact between different controllers in AngularJS

Question

Simple example. I have a player. It's divided into 2 sections: song section (currently playing) and playlist section.

I have 2 controllers (Actulally I'm going to have 2 controllers, that is why i'm asking): SongCtrl and PlalistCtrl;

But how to interact between them? for example: when I start playing song I need also highlight it inside of playlist.

Answer 1

The best way to do this is with a service. Let's say you have a service responsible for playing the songs (over-simplified):

.factory( 'musicPlayer', function() {
 var currentSongId;
 // public API
 return {
 getCurrentSong: function () { return currentSongId; },
 setCurrentSong: function ( id ) { currentSongId = id; }
 };
});

You can then use this in your playlist:

.controller( 'PlaylistCtrl', function ( $scope, musicPlayer ) {
 $scope.isCurrentSong = function( idx ) {
 if ( $scope.currentSong == idx ) return true;
 };
 $scope.play = function( idx ) {
 musicPlayer.setCurrentSong( idx );
 };
 $scope.$watch( function () { 
 return musicPlayer.getCurrentSong()
 }, function ( id ) {
 $scope.currentSong = id;
 }); 
});

So your view could then access it:

<li ng-repeat="song in songs" ng-class="{ active: isCurrentSong($index) }">
 <a ng-click="play($index)">{{song.name}}</a>
</li>

And you would access it similarly in your other controller to get the current playing song. Without more detail, it's hard to be more specific, but this is the best practice approach.

• ValeriiVasin: Thanks a lot! it seems like my Player :D I don't know $watch syntax with 2 functions as arguments, but I will discover!

Answer 2

You could have the controllers interact with each other using directives or services.

Regarding your example:

hen I start playing song I need also highlight it inside of playlist.

In this particular case you should avoid changing the DOM directly from the controllers. For example, you could have a directive that highlights the song being played in the playlist,

• ValeriiVasin: What do you mean? I'm not going to change something from controller. Going to use ng-class for that.
• Ulises: That's actually what I meant, use ng-class instead of adding javascript from the controller. Also, you may want to reconsider having a single controller, it will simplify things. You could still have dedicated services (one for song and the other for playlist)
• ValeriiVasin: I like this approach too. Will think about it. Also others share how to "Angular-way" do sharing :) Thank you too for your responses.