单击列表项,页面转换但详细信息页面仅显示除()之外的项目详细信息

时间:2014-09-10 16:05:00

标签: javascript angularjs ionic-framework


目前,主要列表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

2 个答案:

答案 0 :(得分: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;
});

答案 1 :(得分:1)

我不知道{{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'
    }) ...

应该这样做。