如何在 Ionic Lab 入门项目“Sidemenu”中设置主从视图？

Question

我正在使用 Ionic Lab 来学习基础知识。我有入门模板“Sidemenu”，它是某种几乎可以运行的音乐应用程序。它主要展示了侧边菜单——效果很好，但有点烦人的是，应用程序的播放列表部分中包含的主从模式似乎只是部分设置了。主（列表）视图使用数据数组，但详细视图仅使用 HTML 的通用硬编码位。更进一步，主视图和详细视图都从同一个数组中读取，在不同的模板中显示不同的数据（这些模板已经设置，详细视图的控制器也是如此——但它是空的）必须非常容易).. 但我正在努力找出正确的方法是什么。

有人可以指点我正确的方向吗？

列表视图：

<ion-view view-title="Playlists">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
        {{playlist.title}} – 
        {{playlist.content}}
        <p>{{playlist.id}}</p>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

详细视图：

<ion-view view-title="Playlist">
  <ion-content>
    <h1>Playlist</h1>
    <ion-item class="card">
        <div class="item item-text-wrap">
            {{playlist.title}}
            Bar
        </div>
        <div class="item item-text-wrap">    
            Foo
            {{playlist.content}}
        </div>
    </ion-item>
  </ion-content>
</ion-view>

app.js：

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

   //... some other states here

    .state('app.playlists', {
      url: '/playlists',
      views: {
        'menuContent': {
          templateUrl: 'templates/playlists.html',
          controller: 'PlaylistsCtrl'
        }
      }
    })

  .state('app.single', {
    url: '/playlists/:playlistId',
    views: {
      'menuContent': {
        templateUrl: 'templates/playlist.html',
        controller: 'PlaylistCtrl'
      }
    }
  });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/playlists');
});

controllers.js

    .controller('PlaylistsCtrl', function($scope) {
  $scope.playlists = [
    {
        content: 'Integer legentibus erat a ante historiarum dapibus.',
        title: 'Reggae',
        id: 1 
    },
    { 
        content: 'Pellentesque habitant morbi tristique senectus et netus.',
        title: 'Chill',
        id: 2 
    }
  ];
})

.controller('PlaylistCtrl', function($scope, $stateParams) {
    // empty, as it is by default, but I've tried adding data here and nothing happens
});

详细视图中的数据不会加载。我想我需要设置其他东西？

任何帮助——即使这只是我应该读到的关于我自己的东西，将不胜感激。

controllers.js

Answer 1

传入的 ID 值将在 $stateParams 中可用。如果你 console.dir 它，你会看到它。我相信该值将是 playlistId。鉴于数据是假的（参见上面的列表），您的代码可以执行以下操作：

$scope.playlists = [
{
    content: 'Integer legentibus erat a ante historiarum dapibus.',
    title: 'Reggae',
    id: 1 
},
{ 
    content: 'Pellentesque habitant morbi tristique senectus et netus.',
    title: 'Chill',
    id: 2 
}
];
$scope.selected = $scope.playlists[$stateParams.playlistId-1];

由于 ID（1 和 2）与数组项匹配，因此只需使用数组索引即可获取所选值。显然，一个真正的应用程序不会像这样复制数据并使用服务，但如果你只是想让它运行，它会给你一个帮助。

我使用 $scope.selected 作为变量，所以在视图中，例如使用 {{selected.title}}。