javascript - 如何点击列表中的某个项目并在新页面中查看该项目？ AngularJS 和 Ionic

Question

我有一个项目列表，理想情况下，单击该项目后，会将我带到帖子本身。我不知道如何做到这一点..我在标题中尝试了 ng-click，但我认为路线本身不起作用。

出于测试目的，我使用了工作 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'

Answer 1

有一个工作 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'
    }

如代码示例所示，问题是我们必须使用绝对 View 命名:

• View Names - Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

因此，因为我们想要将状态 tab 的 View 定位为 tab-posts，所以我们必须使用绝对命名:'tab-posts@tab'

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

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

为了完整性，有更新 View 函数，获取帖子 ID:

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

所有可以观察到的here