javascript - AngularJS nested ui-view into an ng-repeat - Stack Overflow

admin管理员组

文章数量:1221313

I'm creating an app using Spotify API. This app can: 1. find albums by artist name through an input field 2. once the albums are shown, the user can click the album's title and see its tracks

I have created 2 views: 1. the albums view 2. the tracks view, child of albums view.

I'd like to show the tracks ui-view of a specific clicked album - with its ID - into the albums' ng-repeat, but the result is that I have the same tracks list of the clicked album throughout all albums list. How can I show the album's track ui-view into the clicked album container that is a result of an ng-repeat directive?

Here's the code.

Routing:

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

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

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

The tracks controller:

angular.module('spotifyAngularApp')
.controller('TracksCtrl', function ($scope, $stateParams, spotifyService) {
    console.log($stateParams);
    spotifyService.albumTracks($stateParams.id).then(function(data){
        $scope.tracks = data.items;
      });
});

I'm creating an app using Spotify API. This app can: 1. find albums by artist name through an input field 2. once the albums are shown, the user can click the album's title and see its tracks

I have created 2 views: 1. the albums view 2. the tracks view, child of albums view.

I'd like to show the tracks ui-view of a specific clicked album - with its ID - into the albums' ng-repeat, but the result is that I have the same tracks list of the clicked album throughout all albums list. How can I show the album's track ui-view into the clicked album container that is a result of an ng-repeat directive?

Here's the code.

Routing:

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

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

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

The tracks controller:

angular.module('spotifyAngularApp')
.controller('TracksCtrl', function ($scope, $stateParams, spotifyService) {
    console.log($stateParams);
    spotifyService.albumTracks($stateParams.id).then(function(data){
        $scope.tracks = data.items;
      });
});

• javascript
• angularjs
• nested
• angularjs-ng-repeat
• angular-ui-router

Share Improve this question Follow edited Jul 19, 2018 at 10:48 Gargaroz 31299 silver badges2828 bronze badges asked Oct 23, 2014 at 14:39 DavideCarianiDavideCariani 27377 silver badges2222 bronze badges 4

• Maybe this could be intersting for you: stackoverflow.com/a/24902144/1679310. There is an example how to handle scenario with repeat... maybe that could give some ideas... – Radim Köhler Commented Oct 23, 2014 at 14:43
• Thank you for your reference, it works, but when you instace a new state the ui-router looks for a template url and an ui-view. but i was trying to figure out how to add in an ng-repeat a ui-view with another ng-repeat inside. – DavideCariani Commented Oct 24, 2014 at 15:58
• can u create plunkr , where have you reached with sample data it would be more helpfull – vijay Commented Feb 8, 2015 at 20:08
• If the reason is just to separate tracks views' logic from albums controller. Just use ng-include with ng-controller for tracks views' template and controller. And also if you want to show tracks for a specific album when the page loads (e.g. according to url parameters) you can handle this showing/hiding logic in your albums controller. – Umur Gedik Commented Feb 9, 2015 at 13:29

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 11 +300

What you're trying to do does not make sense. A state may have multiple views associated with it but these views must be predefined, not dynamically generated.

There is a conflict between the code where you statically define your only 1 view:

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

and the code where you generate ui-view dynamically with ng-repeat. There is no logic to say which ui-view to load your html into. In this case, I suggest to have only 1 ui-view by moving it out of 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>

Or if you really need to put it inside ng-repeat due to the way you layout your page, try ng-if to ensure that only 1 ui-view is shown. (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>

and modify your MainCtrl a bit to inject $state so that we have access to it in the view:

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

  //your code
});

Unfortunately, what you're trying to do doesn't really make sense. What you're saying with this is "repeat this state's (albums') view a number of times equal to how many items there are in the collection albums." But then, when you click on the anchor, you're telling the album.tracks state to go get the album with the id of the album you clicked on. This will then display the album.tracks state in every ui-view in the albums view (which is what you're seeing).

A single state can't be "instanced" multiple times on the same page like you're attempting to do here. See this question for more information: Does Angular JS support routing of multiple views on the same page

I would suggest building this a different way - perhaps using an ng-repeat with ngInclude inside, if you need to keep your template separate. Otherwise, it's probably just easier to build the whole template on one page, ng-repeat for all of the albums and tracks, then hide all of them and show each one when clicked via ngHide/ngShow.

If you need to create multiple views inside an ng-repeat, would it be better to create a directive?

本文标签： javascriptAngularJS nested uiview into an ngrepeatStack Overflow