Question

我是离子框架和angularjs的新手。我试图了解列表项如何映射到app.single。在其他例子中，我发现使用＆＃34; list.item＆＃34;对于父母＆＃34;列表＆＃34;状态，但这对我没有用（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标记，它为每个播放列表项目提供了目标模板的网址。

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

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

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

url: "/playlists/:playlistId",

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

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

1 个答案: