Angularjs - ui-router совместное использование данных между представлениями

Question

У меня есть список, который отображает все объекты верхнего уровня, затем вы нажимаете на родительский объект и меняете вид на следующее состояние, являющееся дочерним объектом, принадлежащим родительскому объекту.

У меня есть третье состояние, в котором я хочу показать дочерний объект, а не список.

Demo почти готов (я думаю): http://plnkr.co/edit/6pqT0F?p=preview

Когда я нажимаю playlist1> playlist.singleCategory1 я хочу показать идентификатор: '1', название: 'Playlist1.singleCategory1'

Услуги:

angular.module('starter.services', []) 

    .service('PlaylistsService', function($q) { 
     return { 
     playlists: [ 
      { id: '1', title: 'Playlist1', 
       singleCategory: [ 
       { id: '1', title: 'Playlist1.singleCategory1' }, 
       { id: '2', title: 'Playlist1.singleCategory2' }, 
       { id: '3', title: 'Playlist1.singleCategory3' } 
       ] 
      }, 
      { id: '2', title: 'Playlist2', 
       singleCategory: [ 
       { id: '1', title: 'Playlist2.singleCategory1' }, 
       { id: '2', title: 'Playlist2.singleCategory2' }, 
       { id: '3', title: 'Playlist2.singleCategory3' } 
       ] 
      }, 
      { id: '3', title: 'Playlist3', 
       singleCategory: [ 
       { id: '1', title: 'Playlist3.singleCategory1' }, 
       { id: '2', title: 'Playlist3.singleCategory2' }, 
       { id: '3', title: 'Playlist3.singleCategory3' } 
       ] 
      } 
     ], 
     getPlaylists: function() { 
      return this.playlists 
     }, 
     getPlaylist: function(playlistId) { 
      var dfd = $q.defer() 
      this.playlists.forEach(function(playlist) { 
      if (playlist.id === playlistId) dfd.resolve(playlist) 
      }) 

      return dfd.promise 
     } 
     } 
    }) 

Контроллеры:

angular.module('starter.controllers', []) 

.controller('AppCtrl', function($scope) { 
}) 

.controller('PlaylistsCtrl', function($scope, playlists) { 
    $scope.playlists = playlists 
}) 

.controller('PlaylistCtrl', function($scope, playlist) { 
    $scope.playlist = playlist 
}) 

.controller('SingleCtrl', function($scope) { 
}); 

app.js :

angular.module('starter', ['ionic', 'starter.services', 'starter.controllers']) 

.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 

    .state('app', { 
     url: "/app", 
     abstract: true, 
     templateUrl: "menu.html", 
     controller: 'AppCtrl' 
    }) 

    .state('app.search', { 
     url: "/search", 
     views: { 
     'menuContent' :{ 
      templateUrl: "search.html" 
     } 
     } 
    }) 

    .state('app.browse', { 
     url: "/browse", 
     views: { 
     'menuContent' :{ 
      templateUrl: "browse.html" 
     } 
     } 
    }) 
    .state('app.playlists', { 
     url: "/playlists", 
     views: { 
     'menuContent': { 
      templateUrl: "playlists.html", 
      controller: 'PlaylistsCtrl', 
      resolve: { 
      playlists: function(PlaylistsService) { 
       return PlaylistsService.getPlaylists() 
      } 
      } 
     } 
     } 
    }) 
    .state('app.playlist', { 
     url: "/playlists/:playlistId", 
     views: { 
     'menuContent': { 
      templateUrl: "playlists.playlist.html", 
      controller: 'PlaylistCtrl', 
      resolve: { 
      playlist: function($stateParams, PlaylistsService) { 
       return PlaylistsService.getPlaylist($stateParams.playlistId) 
      } 
      } 
     } 
     } 
    }) 
    .state('app.single', { 
     url: "/playlists/:playlistId/:singleId", 
     views: { 
     'menuContent': { 
      templateUrl: "playlists.playlist.single.html", 
      controller: 'SingleCtrl' 
     } 
     } 
    }); 
    // if none of the above states are matched, use this as the fallback 
    $urlRouterProvider.otherwise('/app/playlists'); 
}); 

Answer 1

В вашем SingleCtrl, вы должны получить playlistId от stateParams и снова извлечь этот конкретный элемент из службы.

Я реализовал его, как показано ниже:

В контроллере:

angular.module('starter.controllers', ["starter.services"]) 

    .controller('SingleCtrl', function($scope, $stateParams, PlaylistsService) { 
     PlaylistsService.getSingle($stateParams.playlistId, $stateParams.singleId).then(function(data){ 
     $scope.single = data; 
     }) 
    }); 

В вашей службе: я создал еще один метод, называемый getSingle, который будет принимать как playlistid и singleId принести что особенно объект.

getSingle: function(playlistId, singleId) { 
      var dfd = $q.defer(); 
      this.getPlaylist(playlistId).then(function(playlist) { 
      playlist.singleCategory.forEach(function(single) { 
        if(single.id==singleId) { 
        dfd.resolve(single); 
        } 
       }); 

      }); 

      return dfd.promise 
     } 

DEMO