如何单击列表中的项目并在新页面中查看该项目?AngularJS和Ionic

How to click on a item in a list and view the item in a new page? AngularJS and Ionic

本文关键字：项目 新页面 Ionic AngularJS 单击 列表 何单击      更新时间：2023-09-26

我有一个项目列表，理想情况下，点击项目后，我会看到帖子本身。我不知道该怎么拥有它。。我试着点击标题，但我认为路线本身不起作用。

为了测试的目的，我使用了一行VIEW的工作，点击后应该会指向上面的函数。我怀疑问题出在app.js状态，以及我如何在$state.go.中定义它

感谢您的帮助。非常感谢！

主列表html

<ion-view ng-controller="NavCtrl"> 
    <div class="container posts-page">
          <div class="post row" ng-repeat="(postId, post) in posts">
    <a ng-click="view()">VIEW</a> <!-- the VIEW when clicked = no actions -->


js文件使用"tab.view"无效。

    $scope.view = function() {
      $state.go('tab.posts.view', {postId: postId});
    };


app.js状态文件

.state('tab.posts', {
  url: '/posts',
  views: {
    'tab-posts': {
      templateUrl: 'templates/tab-posts.html',
      controller: 'PostsCtrl'
.state('tab.posts.view', {
  url: '/:postId',
  views: {
    'tab-posts':{
      templateUrl: 'templates/tab-showpost.html',
      controller: 'PostViewCtrl'

有一个正在工作的plunker，显示如何：

.state('tab.posts', {
  url: '/posts',
  views: {
    'tab-posts': {
      templateUrl: 'tab-posts.html',
      controller: 'PostsCtrl'
    },
  }
})
.state('tab.posts.view', {
  url: '/:postId',
  views: {
    // here is the issue, instead of this
    // 'tab-posts':{
    // we have to use this
    'tab-posts@tab':{
      templateUrl: 'tab-showpost.html',
      controller: 'PostViewCtrl'
    }

正如代码示例所示，问题是，我们必须使用绝对视图命名：

  • 视图名称-相对名称与绝对名称

在幕后，每个视图都会被分配一个绝对名称，该名称遵循viewname@statename的方案，其中viewname是视图指令中使用的名称，state name是状态的绝对名称，例如contact.item。您还可以选择用绝对语法编写视图名称。

因此，因为我们想要针对名为tab-posts的状态tab的视图，所以我们必须使用绝对命名：'tab-posts@tab'

此外，我们应该将postId传递到view()函数中，或者我们可以直接使用ui-sref

<a ng-click="view(postId)">VIEW</a>
<a ui-sref="tab.posts.view({postId: postId})">VIEW</a>

为了完整起见，有一个更新视图func，采用post-id:

$scope.view = function(postId) {
    $state.go('tab.posts.view', {postId: postId});
};

所有这些都可以在这里观察到

相关文章：