javascript - 如何在 Ionic Lab 启动项目 “Sidemenu” 中设置主从 View ？

Question

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

有人能给我指出正确的方向吗？

ListView :

<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>

详细 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>

应用程序.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');
});

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

详细 View 中的数据未加载。我想我需要设置其他东西？

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

Controller .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 作为变量，因此在 View 中，使用 {{selected.title}} 为例。