Angularjs - 用戶界面之間共享數據的路由器

Question

我有一個列表顯示所有頂級對象，然後單擊一個父對象，然後視圖切換到下一個狀態，即屬於父級的子對象。

我有第三個狀態，我想顯示子對象本身，而不是一個列表。

演示已準備得差不多（我猜）：http://plnkr.co/edit/6pqT0F?p=preview

當我點擊playlist1> playlist.singleCategory1我想顯示ID：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，你必須從stateParams得到playlistId並再次讀取從服務，特定元素。

我實現它象下面這樣：

在你的控制器：

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