Question

我有一份清单。我想要的是当我点击列表中的一个项目时，应该打开一个新页面，其中只显示与该listItem相关的数据。现在我使用锚标记和.config来传递这样的数据：

<ion-item ng-repeat="field in fields">
    <a href="#detail/{{field.firstName}}/{{field.personNo}}/{{field.street}}/{{field.city}}/{{field.postcode}}" id="a-item"> <div style="width:100%;height:100%" >    
         {{field.firstName}}<br>
         {{field.personNo}} </div></a> 
 </ion-item>

并且

.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
  when('/', {
    templateUrl: 'templates/mainpage.html'

  }).
  when('/detail/:name/:no/:street/:city/:postcode', {
    templateUrl: 'templates/details.html',
    controller: 'detailctrl'
})
}])

我认为这不是传递数据的有效方法。虽然我知道.service但我无法找到一种方法来传递特定于所点击项目的数据。请建议一个更好的方法。感谢

Answer 1

您正在查看的是您确实希望使用服务（或工厂）的经典主详细信息模式。

我将对您的代码进行的第一个更改是为主路由提供控制器，以及仅传递给personNo的详细路由。

.config(['$routeProvider',function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'templates/mainpage.html',
        controller: 'mainctrl'
      }).
      when('/detail/:no', {
        templateUrl: 'templates/details.html',
        controller: 'detailctrl'
    })
}])

接下来，让我们通过两个方法通过工厂设置“PeopleService”。一个是GetPeople方法，该方法获取数组中的所有人并通过$ http解析一个promise，然后将其存储在私有变量中。 GetPerson方法在该私有变量中按personNo查找person。

.factory('PeopleService',['$http',function($http){
    var people = [];
    return {
        GetPeople: function(){ 
            $http.get("path/to/resource").then(function(response){
                people = response;
                return response;
            });
        },
        GetPerson: function(personNo){
            for(i=0;i<people.length;i++){
                if(people[i].personNo == personNo){
                    return people[i];
                }
            }
        }
    }
}]);

接下来，在我们的mainctrl中，我们将要调用GetPeople函数。

.controller("mainctrl",['PeopleService',function(PeopleService){
    PeopleService.GetPeople().then(function(people){
        $scope.people = people;
    });
}]);

最后，在我们的detailsctrl中，我们将从$ routeParams获取personNo并使用它从我们的服务中调用GetPerson方法。

.controller("detailctrl",['$routeParams','PeopleService',function($routeParams,PeopleService){
    var personNo = $routeParams.no;
    $scope.person = PeopleService.GetPerson(personNo);
}]);

将特定数据从一个控制器传递到另一个控

1 个答案: