如何做离子框架app.single工作 [英] how does app.single work in ionic framework

问题描述

我是新来的离子框架，也angularjs。我想了解如何做列表项被映射到app.single。在其他的例子中，我发现使用list.item父名单的状态，但对我来说没有工作（的 egghead.io教程）。结果我用的碱性离子与应用sidemenu。结果有人可以请解释如何app.single越来越映射到播放列表项？

  

playlists.html：

 ＆LT;离子查看查看标题=播放列表＆GT;
  ＆LT;离子含量＆GT;
    ＆LT;离子列表＆gt;
      ＆LT;离子项目NG重复=播放列表播放列表中的href =＃/应用程序/播放列表/ {{playlist.id}}＆GT;
    {{playlist.title}}
      ＆LT; /离子项目＆GT;
    ＆LT; /离子列表＆gt;
  ＆LT; /离子含量＆GT;
＆LT; /离子视图＆gt;
 

  

playlist.html

 ＆LT;离子查看查看标题=播放列表＆GT;
  ＆LT;离子含量＆GT;
    ＆LT; H1＆GT;＆播放LT; / H1＆GT;
  ＆LT; /离子含量＆GT;
＆LT; /离子视图＆gt;
 

  

controller.js

  .controller（'PlaylistsCtrl'，函数（$范围）{
$ scope.playlists = [
{标题：雷鬼，ID：1}，
{标题：大寒，ID：2}，
{标题：'的Dubstep，ID：3}，
{标题：'独立'，ID：4}，
{标题：说唱，ID：5}，
{标题：牛铃，ID：6}
];
}）.controller（'PlaylistCtrl'，函数（$范围，$ stateParams）{
}）;
 

  

app.js

  .STATE（'app.playlists'，{
  网址：/播放列表，
    观点：{
      menuContent：{
      templateUrl：模板/ playlists.html
      控制器：'PlaylistsCtrl
    }
  }
}）.STATE（'app.single'，{
  网址：/播放列表/：playlistId
    观点：{
      menuContent：{
       templateUrl：模板/ playlist.html
       控制器：'PlaylistCtrl
    }
  }
}）;
 

解决方案

在您playlists.html，有一个HTML标记这给网址为目标模板每个播放列表项目。

 的href =＃/应用程序/播放列表/ {{playlist.id}}
 

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

然后，请您专注于每个控制器链接到所需的URL app.js。

  URL：/播放列表/：playlistId
 

这是你的'app.single状态被链接到每个播放列表项目的一部分。在这种情况下/应用'被'应用'状态定义的抽象参数省略。

I am new to ionic framework and also to angularjs. I am trying to understand how does list items get mapped to app.single. In other example I found use of "list.item" for parent "list" state, but that didnt work for me (egghead.io tutorial).
I am using basic ionic app with sidemenu.
Can someone please explain how is app.single getting mapped to playlist item?

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

解决方案

In your playlists.html, there's a html tag which gives url to target template for each playlist items.

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

So, once a user taps on an item in current list, he will get redirected to "/app/playlists/{{playlist.id}}" page.

And then, please kindly focus on app.js which links each controller to desired url.

url: "/playlists/:playlistId",

This is the part where your 'app.single' state is linked to each playlist item. In this case '/app' is omitted by abstract param of 'app' state definition.

这篇关于如何做离子框架app.single工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！