Question

简单的例子。我有一名球员。它分为两部分：歌曲部分（正在播放）和播放列表部分。

我有2个控制器（Actulally我将有2个控制器，这就是我要问的原因）：SongCtrl和PlalistCtrl;

但是如何在它们之间进行交互？例如：当我开始播放歌曲时，我还需要在播放列表中突出显示它。

Answer 1

最好的方法是使用服务。假设你有一个负责播放歌曲的服务（过度简化）：

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

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

然后，您可以在播放列表中使用此功能：

.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;
  }); 
});

因此您的视图可以访问它：

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

您可以在其他控制器中以类似方式访问它以获取当前播放的歌曲。没有更多细节，很难更具体，但这是最佳实践方法。

Answer 2

您可以让控制器使用directives或services进行互动。

关于你的例子：

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

在这种特殊情况下，您应该避免直接从控制器更改DOM。例如，您可以使用directive突出显示正在播放列表中播放的歌曲

如何在AngularJS中的不同控制器之间进行交互

2 个答案: