app.single 如何在 ionic 框架中工作

Question

我是 ionic 框架和 angularjs 的新手。我试图了解列表项如何映射到 app.single。在其他示例中，我发现父“列表”状态使用“list.item”，但这对我不起作用（egghead.io tutorial）。
我正在使用带有sidemenu的基本离子应用程序。
有人可以解释一下吗app.single 如何映射到播放列表项？

播放列表.html：

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

播放列表.html

<ion-view view-title="Playlist">
  <ion-content>
    <h1>Playlist</h1>
  </ion-content>
</ion-view>

controller.js

.controller('PlaylistsCtrl', function($scope) {
$scope.playlists = [
{ title: 'Reggae', id: 1 },
{ title: 'Chill', id: 2 },
{ title: 'Dubstep', id: 3 },
{ title: 'Indie', id: 4 },
{ title: 'Rap', id: 5 },
{ title: 'Cowbell', id: 6 }
];
})

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

app.js

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

Answer 1

在您的 playlists.html 中，有一个 html 标记，它为每个播放列表项提供指向目标模板的 url。

href="#/app/playlists/{{playlist.id}}"

因此，一旦用户点击当前列表中的某个项目，他将被重定向到“/app/playlists/{{playlist.id}}”页面。

然后，请关注 app.js，它将每个控制器链接到所需的 url。

url: "/playlists/:playlistId",

这是您的“app.single”状态链接到每个播放列表项的部分。在这种情况下，“app”状态定义的抽象参数省略了“/app”。