Zagnieżdżone ui-view AngularJS do powtórzenia polecenia ng

Question

Tworzę aplikację z Spotify API. aplikacja może zrobić: 1. albumy znaleźć, nazwy wykonawcy przez pole wprowadzania 2. Po albumy są pokazane użytkownik może kliknąć tytuł albumu i widzieć utworów tego albumu

stworzyłem 2 widoki: 1. widok albumów 2. widok utworów, widok dzieci z albumów.

Chciałbym pokazać utwór w widoku ui-klikniętego albumu - z identyfikatorem - w powtórce ng albumów. ale wynik jest taki, że mam tę samą listę ścieżek klikniętego albumu na całej liście albumów. jak mogę wyświetlić ui-view albumu utworu w klikniętym kontenerze na album będącym wynikiem dyrektywy ng-repeat?

tutaj kod:

trasy:

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

Albumy zobaczyć:

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

Główny kontroler albumy:

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

Kontroler utworów:

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

Niestety, to, co próbujesz zrobić, nie ma większego sensu. To, co mówisz, to "powtórz ten widok stanu (albumy) tyle razy, ile jest pozycji w albumach kolekcji". Ale kiedy klikniesz na kotwicę, mówisz do albumu. Ścieżki stan, aby uzyskać album z identyfikatorem albumu, który kliknąłeś. Spowoduje to wyświetlenie stanu album.tracks w każdym widoku interfejsu użytkownika w widoku albumów (co widzisz).

Pojedynczy stan nie może być "instancyjny" wiele razy na tej samej stronie, co próbujesz tutaj zrobić. Zobacz to pytanie, aby uzyskać więcej informacji: Does Angular JS support routing of multiple views on the same page

Proponuję zbudować to w inny sposób - być może używając ng-repeat z ngInclude inside, jeśli chcesz zachować swój szablon oddzielnie. W przeciwnym razie prawdopodobnie łatwiej będzie zbudować cały szablon na jednej stronie, powtórzyć ng dla wszystkich albumów i ścieżek, a następnie ukryć je wszystkie i pokazać po kliknięciu przez ngHide/ngShow.

Answer 2

To, co próbujesz zrobić, nie ma sensu. Stan może wiązać się z wieloma widokami, ale te widoki muszą być predefiniowane, a nie generowane dynamicznie.

Istnieje konflikt między kodem gdzie statycznie zdefiniować tylko 1 Widok:

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

i kod gdzie wygenerować UI-view dynamicznie z ng-repeat. Nie ma żadnej logiki, która pozwoliłaby załadować twój html do wersji ui-view.W tym przypadku proponuję mieć tylko 1 ui-view przesuwając go z 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> 

Lub jeśli naprawdę trzeba umieścić go wewnątrz ng-repeat ze względu na sposób, w jaki layout strony, spróbuj ng-if aby upewnić się, że tylko 1 ui-view jest wyświetlany. (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> 

i zmodyfikować MainCtrl trochę wstrzyknąć $state tak, że mamy do niego dostęp w widoku:

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

    //your code 
}); 

Answer 3

Jeśli trzeba utworzyć wiele widoków wewnątrz NG-repeat, to lepiej stworzyć dyrektywę?