Come interagire tra diversi controller in AngularJS

Question

Semplice esempio. Ho un giocatore. È diviso in 2 sezioni: sezione brani (attualmente in riproduzione) e sezione playlist.

Ho 2 controller (in realtà avrò 2 controller, è per questo che sto chiedendo): SongCtrl e PlalistCtrl;

Ma come interagire tra di loro? per esempio: quando inizio a giocare, devo anche metterlo in evidenza all'interno della playlist.

Answer 1

I controller possono interagire tra loro utilizzando directives o services.

Per quanto riguarda il tuo esempio:

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

In questo caso particolare si dovrebbe evitare di modificare il DOM direttamente dai controllori. Ad esempio, potresti avere un directive che evidenzia il brano riprodotto nella playlist,

Answer 2

Il modo migliore per farlo è con un servizio. Diciamo che dispone di un servizio responsabile per la riproduzione dei brani (over-semplificato):

.factory('musicPlayer', function() { 
    var currentSongId; 

    // public API 
    return { 
    getCurrentSong: function() { return currentSongId; }, 
    setCurrentSong: function (id) { currentSongId = id; } 
    }; 
}); 

È quindi possibile utilizzare questo nella tua 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; 
    }); 
}); 

Così la vostra vista potrebbe quindi accesso iT:

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

E si potrebbe accedere allo stesso modo nel vostro altro controller per ottenere il brano attuale. Senza ulteriori dettagli, è difficile essere più specifici, ma questo è l'approccio migliore.