我正在使用Spotify API创建一个应用程序.
这个程序可以：
1.通过输入字段按艺术家姓名查找专辑
2.一旦显示专辑,用户可以点击专辑的标题并查看其曲目
这个程序可以：
1.通过输入字段按艺术家姓名查找专辑
2.一旦显示专辑,用户可以点击专辑的标题并查看其曲目
我创建了2个视图：
1.专辑视图
2.曲目视图,专辑视图的子项.
我想将特定点击专辑的曲目ui-view(带有ID)显示在专辑的ng-repeat中,但结果是我在所有专辑列表中都有相同的专辑曲目列表.如何将专辑的曲目ui-view显示在由ng-repeat指令导致的单击相册容器中？
这是代码.
路由：
------
.config(function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('albums',{
url: '/',templateUrl: 'views/main.html',controller: 'MainCtrl'
}).
state('albums.tracks',{
url: ':id/tracks',templateUrl: 'views/tracks.html',controller: 'TracksCtrl'
});
})
-----
相册视图：
<div ng-if="albums.items">
<h1>{{searchedArtist}}'s Album List:</h1>
<!-- albums ng-repeat -->
<div ng-repeat="album in albums.items | unique:'name'" id="{{album.id}}">
<img ng-src="{{album.images[1].url}}" width="100">
<!-- the action to translate the state to tracks view -->
<a ui-sref="albums.tracks({id : album.id})">{{album.name}}</a>
<!-- tracks view -->
<div ui-view></div>
</div>
主要专辑控制器：
angular.module('spotifyAngularApp')
.controller('MainCtrl',function ($scope,spotifyService) {
var options = {
'limit': 10
};
$scope.searchAlbums= function () {
var sanitizeArtist = $scope.artist.split(' ').join('+');
$scope.searchedArtist = $scope.artist;
spotifyService.search(sanitizeArtist,'album',options).then(function(data) {
$scope.albums = data.albums;
});
};
});
轨道控制器：
angular.module('spotifyAngularApp')
.controller('TracksCtrl',$stateParams,spotifyService) {
console.log($stateParams);
spotifyService.albumTracks($stateParams.id).then(function(data){
$scope.tracks = data.items;
});
});
解决方法
你想要做的事情没有意义.状态可能有多个与之关联的视图,但这些视图必须是预定义的,而不是动态生成的.
您静态定义唯一1个视图的代码之间存在冲突：
state('albums.tracks',controller: 'TracksCtrl'
});
以及使用ng-repeat动态生成ui-view的代码.没有逻辑可以说明加载你的html的ui-view.在这种情况下,我建议通过将其移出ng-repeat只有1个ui-view：
<div ng-if="albums.items">
<h1>{{searchedArtist}}'s Album List:</h1>
<!-- albums ng-repeat -->
<div ng-repeat="album in albums.items | unique:'name'" id="{{album.id}}">
<img ng-src="{{album.images[1].url}}" width="100">
<!-- the action to translate the state to tracks view -->
<a ui-sref="albums.tracks({id : album.id})">{{album.name}}</a>
</div
<!-- tracks view -->
<div ui-view></div>
</div>
或者,如果由于布局页面的方式确实需要将其置于ng-repeat内,请尝试ng-if以确保仅显示1 ui-view. (这是一种解决方法,不推荐)
<div ng-if="albums.items">
<h1>{{searchedArtist}}'s Album List:</h1>
<!-- albums ng-repeat -->
<div ng-repeat="album in albums.items | unique:'name'" id="{{album.id}}">
<img ng-src="{{album.images[1].url}}" width="100">
<!-- the action to translate the state to tracks view -->
<a ui-sref="albums.tracks({id : album.id})">{{album.name}}</a>
<!-- tracks view -->
<div ng-if="$state.is('albums.tracks',{id : album.id})" ui-view></div>
</div>
</div>
并修改你的MainCtrl一点注入$state,以便我们在视图中访问它：
angular.module('spotifyAngularApp')
.controller('MainCtrl',spotifyService,$state) {
$scope.$state = $state;
//your code
});
