app.single 如何在离子框架中工作

Question

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

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

playlist.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' 状态定义的抽象参数省略。

app.single 如何在离子框架中工作

how does app.single work in ionic framework

angularjs

ionic-framework