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 Names - Relative vs. Absolute Names

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

所以，因为我们想要定位名为tab的状态 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>

为了完整性，有更新视图功能，采用帖子ID：

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

所有可以观察到的here

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

1 个答案: