javascript - AngularJS 将 ui-view 嵌套到 ng-repeat 中

Question

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

我创建了 2 个 View :1.相册 View 2. 轨道 View ，专辑 View 的 subview 。

我想在专辑的 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'
      });
})
-----

相册 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 ui-view></div>
</div>

主专辑 Controller :

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

轨道 Controller :

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

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

静态 定义仅 1 个 View 的代码之间存在冲突:

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

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

<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 以注入(inject) $state 以便我们可以在 View 中访问它:

angular.module('spotifyAngularApp')
.controller('MainCtrl', function ($scope, spotifyService, $state) {
  $scope.$state = $state;

  //your code
});