Question

目前，主要列表html有效

 <div class="post row" ng-repeat="(postId, post) in posts">
   <a href="{{ post.url }}">{{ post.title }}</a>

但是当我点击该项目（列表中的众多项目之一）并转到另一个页面时，新页面不会详细显示该项目？

当我将下面的行（包括依赖项中的$ stateParams）添加到控制器js文件中时，会出现{{post.title}}但数据无法通过。

$scope.post = $scope.posts[$stateParams.id]

的更新
这是州代码。（忽略遗漏的语法......我缩短它）。有人帮助解决了上一个问题，并为查看部分提供了以下代码（最后2个州）。

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

点击列表项后如何访问详细信息。

app.controller('PostViewCtrl', function ($scope, $stateParams, Post) {
    $scope.Post = Post.find($stateParams.postId);   //i think this may be broken

Answer 1

您的问题中缺少的一个关键部分是您的stateProvider是如何配置的。请确保您的状态设置正确，以通过状态参数发送数据。我有a codepen here，它显示了一种方法来获得一个项目列表，点击其中的一个项目会将用户带到它的详细信息。注意状态是如何设置的......

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "tabs.html"
    })
    .state('tabs.home', {
      url: "/home",
      views: {
        'home-tab': {
          templateUrl: "home.html",
          controller: 'HomeTabCtrl'
        }
      }
    })
    .state('tabs.detailview', {
      url: "/detailview/:index", //NOTE: :index is how you use $stateParams later on.
      views: {
        'home-tab': {
          templateUrl: "detailview.html",
          controller: 'DetailviewTabCtrl'
        }
      }
    });


   $urlRouterProvider.otherwise("/tab/home");

});

然后，在你的控制器......

.controller('DetailviewTabCtrl', function($scope,$stateParams) {
  $scope.id = parseInt($stateParams.index);//NOTE: This is the same 'index' 
  $scope.previous = parseInt($stateParams.index) - 1;
  $scope.next = parseInt($stateParams.index) + 1;
});

Answer 2

我不知道{{post.url}}中的ng-repeat是什么;但我认为你需要一个不同的$state来处理细节视图。

做类似的事情：

<div class="post row" ng-repeat="(postId, post) in posts">
   <a ui-sref="postDetail({id:post.id })">{{ post.title }}</a>
</div>

然后，您需要在应用config $stateProvider中添加状态定义，如下所示：

.state('postDetail', {
      url: "/post/:id", 
      //NOTE: :id will be accessed from the controller using $stateParams later on.
      templateUrl: "post_detail.html",
      controller: 'PostDetailCtrl'
    }) ...

应该这样做。

单击列表项，页面转换但详细信息页面仅显示除（）之外的项目详细信息

2 个答案: