angularjs得到NG-重复目的是在不同的页面

我已经尝试了很多办法，服务，$ rootScope，广播控制器...angularjs得到NG-重复目的是在不同的页面

我只是想获取对象的一个实例用户选择的ng-repeat，并将其属性动态地列入新的html页面。

有人可以告诉我这种情况下的最佳解决方案吗？到目前为止我尝试过的所有东西都出错了。

我有两个控制器一个用于页面1，另一个用于页面2和一个包含我的列表的服务。

app.service('selectedPost', function() { 

    var list = { ... }; 
    var post; 

    return { 
     getPost: function() { 
      return post; 
     }, 
     setPost: function(p) { 
      post = p; 
     } 
}); 





app.controller('page2Ctrl', function($scope, selectedPost, $rootScope) { 
     //tried: 
     $scope.obj = selectedPost.getPost(); 

     //tried 
     $scope.obj = {p : selectedPost.getPost() }; 

     //tried: 
     $scope.obj = $rootScope.pobj; 
    }); 

    app.controller('pageCtrl', function($scope, selectedPost, $rootScope) { 
     //I call this method in my page1 html and pass the ng-repeat object as parameter: 
     //tried: 
     $scope.selectPost = function(post) { 
      selectedPost.setPost(post); 
     }; 
     //tried: 
     $scope.selectPost = function(post) { 
      $rootScope.pobj = post; 
     }; 

     $scope.postList = selectedPost.getPostList(); 

     $scope.totalItems = $scope.postList.length; 
     $scope.itemsPerPage = 6; 
     $scope.currentPage = 1; 
     $scope.maxSize = 5; 

     $scope.setPage = function (pageNo) { 
      $scope.currentPage = pageNo; 
     }; 

     $scope.pageChanged = function() { 
      console.log('Page changed to: ' + $scope.currentPage); 
     }; 

     $scope.pageCount = function() { 
      return Math.ceil($scope.postList.length/$scope.itemsPerPage); 
     }; 

     $scope.filter = function(items, groupedBy) { 
     if (items) { 
      var finalItems = [], 
       thisGroup; 
      for (var i = 0; i < items.length; i++) { 
      if (!thisGroup) { 
       thisGroup = []; 
      } 
      thisGroup.push(items[i]); 
      if (((i+1) % groupedBy) === 0) { 
       finalItems.push(thisGroup); 
       thisGroup = null; 
      } 
      } 
      if (thisGroup) { 
       finalItems.push(thisGroup); 
      } 
      return finalItems; 
     } 
     }; 

     $scope.$watch('currentPage + itemsPerPage', function() { 
      var begin = (($scope.currentPage - 1) * $scope.itemsPerPage), 
      end = begin + $scope.itemsPerPage; 

      $scope.filteredItems = $scope.postList.slice(begin, end); 
      $scope.listFilter = $scope.filter($scope.filteredItems, 2); 
      }); 
    });

page1.html

<div ng-controller="pageCtrl"> 
    <div class="row" ng-repeat="itemList in listFilter"> 
     <div class="col-md-6" ng-repeat="post in itemList"> 
      .... 
      <input class="button" type="submit" value="More" ng-click="selectPost(post)"/> 
      ....//redirect to page2.html 
     </div> 
    </div> 
    </div>

page2.html文件：

<div ng-controller="page2Ctrl">{{obj.something}}</div>

谢谢！

来源

2014-10-01 Vitor Freitas

这似乎应该是工作。你有没有尝试验证selectPrpp是否被调用？有什么理由？ getPost返回什么？ – gkalpak 2014-10-01 17:33:35

selectPost被调用，但getPost（）返回undefined，所以这段代码是正确的？ – 2014-10-01 17:39:07

你想从哪里获得'listFilter'？它没有在控制器中定义，也没有被服务返回（因此不可用）。 – Rorschach120 2014-10-01 17:40:13

您正在加载一个完全不同的页面（整页重新加载）并实例化一个全新的Angular应用程序。
您无法跨应用传递状态并使用服务重新加载，因为服务将在每次应用/重新加载时重新实例化。

我怀疑你试图在SPA中实现路由（而不是传统的整页加载）。在这种情况下，您应该使用路由模块，如ngRoute或ui.router。

例如为：

<body ng-app="myApp"> 
    ... 
    <ng-view></ng-view> 
    ... 
    <script src="lib/angular/angular.js"></script> 
    <script src="lib/angular/angular-route.js"></script> 
</body> 

angular. 
    module('myApp', ['ngRoute']). 
    config(function ($routeProvider) { 
     $routeProvider. 
     when('/path1', { 
      templateUrl: '...', 
      controller: '...' 
     }). 
     when('/path2', {...}). 
     ... 
    }). 
    service('selectedPost', ...). 
    controller('...', ...). 
    ...

还参见本short demo。

来源

2014-10-01 21:32:57 gkalpak

这正是我想知道的，谢谢你！ – 2014-10-02 02:12:28

angularjs得到NG-重复目的是在不同的页面

回答

相关问题