AngularJS 将 ui-view 嵌套到 ng-repeat

Question

我正在使用 Spotify API 创建应用。 这个应用程序可以： 1.通过输入字段按艺术家姓名查找专辑 2. 专辑显示后，用户可以点击专辑标题查看曲目

我创建了 2 个视图： 1.相册视图 2. 曲目视图，专辑视图的子视图。

我想在专辑的 ng-repeat 中显示特定点击专辑的曲目 ui-view - 及其 ID，但结果是我在所有专辑中都有相同的点击专辑曲目列表列表。如何将专辑的曲目 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', function ($scope, $stateParams, spotifyService) {
    console.log($stateParams);
    spotifyService.albumTracks($stateParams.id).then(function(data){
        $scope.tracks = data.items;
      });
});

Answer 1

您尝试做的事情没有意义。一个状态可能有多个与之关联的视图，但这些视图必须是预定义的，而不是动态生成的。

静态定义只有 1 个视图的代码之间存在冲突：

state('albums.tracks', {
        url: ':id/tracks',
        templateUrl: 'views/tracks.html',
        controller: 'TracksCtrl'
      });

以及您使用ng-repeat动态生成 ui-view 的代码。没有逻辑可以说明将 html 加载到哪个 ui-view 中。在这种情况下，我建议将ui-view 移出ng-repeat，只保留1 个：

<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。 (this is a workaround and not recommended)

<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', function ($scope, spotifyService, $state) {
  $scope.$state = $state;

  //your code
});

Answer 2

不幸的是，您尝试做的事情并没有真正的意义。你的意思是“重复这个状态的（专辑）查看次数等于收藏专辑中有多少项目。”但是，当您单击锚点时，您是在告诉 album.tracks state 去获取带有您单击的专辑 ID 的专辑。然后，这将在专辑视图的每个 ui 视图中显示 album.tracks 状态（这就是您所看到的）。

不能像您在此处尝试那样在同一页面上多次“实例化”单个状态。有关更多信息，请参阅此问题：Does Angular JS support routing of multiple views on the same page

我建议以不同的方式构建它 - 如果您需要将模板分开，可能使用带有 ngInclude 的 ng-repeat。否则，在一个页面上构建整个模板可能更容易，对所有专辑和曲目进行 ng-repeat，然后隐藏所有这些并在通过 ngHide/ngShow 单击时显示每一个。

Answer 3

如果您需要在 ng-repeat 中创建多个视图，创建指令会更好吗？