AngularJS lồng nhau ui-view thành một ng-repeat

Question

Tôi đang tạo một ứng dụng với API Spotify. ứng dụng có thể làm: 1. album Tìm theo tên nghệ sĩ thông qua một lĩnh vực đầu vào 2. khi album được hiển thị người dùng có thể nhấp vào tên của album và xem các ca khúc của album này

Tôi đã tạo ra 2 quan điểm: 1. giao diện album 2. theo dõi lượt xem, chế độ xem con của album.

Tôi muốn hiển thị các bản nhạc ui-view của một album được nhấp cụ thể - với ID là - vào ng-repeat của album. nhưng kết quả là tôi có cùng một danh sách bài hát của album được nhấp trong tất cả danh sách album. làm thế nào tôi có thể hiển thị ui-view của album trong vùng chứa album được nhấp vào đó là kết quả của chỉ thị ng-lặp lại?

đây mã:

Route:

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

Các album xem:

<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> 

album chính điều khiển:

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

Các theo dõi điều khiển:

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

Thật không may, những gì bạn đang cố gắng làm không thực sự hợp lý. Những gì bạn đang nói với điều này là "lặp lại trạng thái của các album (album) này một số lần bằng số lượng các mục trong album sưu tập." Nhưng sau đó, khi bạn nhấp vào liên kết, bạn đang thông báo cho album.tracks trạng thái để tải album có id của album bạn đã nhấp vào. Điều này sau đó sẽ hiển thị trạng thái album.tracks trong mọi giao diện ui trong giao diện album (đó là những gì bạn đang thấy).

Một trạng thái đơn lẻ không thể được "instanced" nhiều lần trên cùng một trang như bạn đang cố gắng làm ở đây. Xem câu hỏi này để biết thêm thông tin: Does Angular JS support routing of multiple views on the same page

Tôi khuyên bạn nên xây dựng một cách khác - có thể sử dụng ng-lặp lại với ngInclude bên trong, nếu bạn cần giữ riêng cho mẫu của mình. Nếu không, nó có thể dễ dàng hơn để xây dựng toàn bộ khuôn mẫu trên một trang, ng-lặp lại cho tất cả các album và bài hát, sau đó ẩn tất cả chúng và hiển thị mỗi khi được nhấp qua ngHide/ngShow.

Answer 2

Điều bạn đang cố gắng làm không có ý nghĩa. Trạng thái có thể có nhiều chế độ xem được liên kết với nó nhưng các chế độ xem này phải là được xác định trước, không phải được tạo động.

Có sự mâu thuẫn giữa các mã nơi bạn tĩnh xác định bạn chỉ có 1 cái nhìn:

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

và mã nơi bạn tạo ui-view động với ng-repeat. Không có logic để nói rằng ui-view để tải html của bạn vào.Trong trường hợp này, tôi đề nghị để chỉ có 1 ui-view bằng cách di chuyển nó ra khỏi 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> 

Hoặc nếu bạn thực sự cần phải đặt nó bên ng-repeat do cách bạn bố trí trang của bạn, hãy thử ng-if để đảm bảo rằng chỉ 1 ui-view được hiển thị. (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> 

và sửa đổi MainCtrl của bạn một chút để tiêm $state để chúng tôi có quyền truy cập vào nó trong giao diện:

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

    //your code 
}); 

Answer 3

Nếu bạn cần phải tạo ra nhiều quan điểm bên trong một ng-repeat, đúng nó được tốt hơn để tạo ra một chỉ thị?