简单的例子。我有一个球员。它分为 2 个部分:歌曲部分(当前播放)和播放列表部分。
我有 2 个控制器(实际上我将有 2 个控制器,这就是我要问的原因):SongCtrl 和 PlalistCtrl;
但是它们之间如何交互呢?例如:当我开始播放歌曲时,我还需要在播放列表中突出显示它。
简单的例子。我有一个球员。它分为 2 个部分:歌曲部分(当前播放)和播放列表部分。
我有 2 个控制器(实际上我将有 2 个控制器,这就是我要问的原因):SongCtrl 和 PlalistCtrl;
但是它们之间如何交互呢?例如:当我开始播放歌曲时,我还需要在播放列表中突出显示它。
最好的方法是使用服务。假设您有一个负责播放歌曲的服务(过于简化):
.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>
您可以在其他控制器中以类似方式访问它以获取当前正在播放的歌曲。没有更多细节,很难更具体,但这是最佳实践方法。
directives
您可以使用或让控制器相互交互services
。
关于你的例子:
hen I start playing song I need also highlight it inside of playlist.
在这种特殊情况下,您应该避免直接从控制器更改 DOM。例如,您可以有一个directive
突出显示播放列表中正在播放的歌曲,