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

前端之家收集整理的这篇文章主要介绍了javascript – AngularJS将ui-view嵌套到ng-repeat中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用Spotify API创建一个应用程序.
这个程序可以:
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
});
原文链接:https://www.f2er.com/js/158756.html

猜你在找的JavaScript相关文章