Angularjs - ui-router 在视图之间共享数据

Question

我有一个显示所有顶级对象的列表，然后单击父对象，视图将更改为下一个状态，即属于父对象的子对象。

我有第三种状态，我想显示子对象本身，而不是列表。

演示几乎准备好了（我猜）：http://plnkr.co/edit/6pqT0F?p=preview

当我点击 playlist1>playlist.singleCategory1 我想显示 id: '1', title: '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