AngularJS nested ui-view into an ng-repeat

Question

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

Maybe this could be intersting for you: http://stackoverflow.com/a/24902144/1679310. There is an example how to handle scenario with repeat... maybe that could give some ideas... — Radim Köhler, Oct 23 '14 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, Oct 24 '14 at 15:58
can u create plunkr , where have you reached with sample data it would be more helpfull — vijay, Feb 08 '15 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, Feb 09 '15 at 13:29

Khanh TO · Answer 1 · 2015-02-07T04:44:16.140

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

score 4 · Answer 2 · edited May 23 '17 at 12:01

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.

The `ngInclude` directive is definitely the route to go here, and encapsulate the potential "views" as a collection within the controller that can then serve up the content as necessary. — Josh Burgess, Feb 09 '15 at 17:54

score 3 · Answer 3 · answered Feb 09 '15 at 14:34

3

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

answered Feb 09 '15 at 14:34

Raulucco

3,406
1
21
27

AngularJS nested ui-view into an ng-repeat

3 Answers3