从一个控制器传递到另一个特定的数据 [英] Pass specific data from one controller to another

问题描述

我有一个列表。我要的是当我点击相关的只有的listItem数据显示，其中一个新的页面应该打开列表的项目之一。现在我使用的锚标记和的.config通过这样的数据：

 ＆LT;离子项目NG重复=田间场＆GT;
    ＆LT;一href=\"#detail/{{field.firstName}}/{{field.personNo}}/{{field.street}}/{{field.city}}/{{field.post$c$c}}\" ID =一个项目＆GT; ＆LT; D​​IV的风格=宽度：100％;身高：100％＆GT;
         {{field.firstName}}＆LT; BR＆GT;
         {{field.personNo}}＆LT; / DIV＆GT;＆LT; / A＆GT;
 ＆LT; /离子项目＆GT;
 

和

 的.config（['$ routeProvider'，
功能（$ routeProvider）{
$ routeProvider。
  什么时候（'/'， {
    templateUrl：'模板/ mainpage.html  }）。
  当（'/细节/：名称/：无/：街/：城市/：交code'，{
    templateUrl：'模板/ details.html'，
    控制器：'detailctrl
}）
}]）
 

我不认为这是通过数据的有效途径。虽然我知道。服务，但我不能想出一个办法来传递数据具体到单击的项目。请提出一个更好的办法。谢谢

解决方案

什么你看的是你确实想使用的服务（或工厂）的经典主详细模式。

先改变我会让你的code是给主路控制器，以及对细节的路线只有通过在personNo。

 的.config（['$ routeProvider'，函数（$ routeProvider）{
    $ routeProvider。
      什么时候（'/'， {
        templateUrl：'模板/ mainpage.html'，
        控制器：'mainctrl
      }）。
      当（'/细节/：没有'，{
        templateUrl：'模板/ details.html'，
        控制器：'detailctrl
    }）
}]）
 

接下来，让我们设置通过工厂PeopleService有两种方法。一，是GetPeople方法，得到数组中的所有的人并将其存储在私有变量之前通过解析HTTP $承诺。该GetPerson方法查找一个人通过personNo在私有变量。

  .factory（'PeopleService'，['$ HTTP'，函数（$ HTTP）{
    变种人= [];
    返回{
        GetPeople：功能（）{
            $ http.get（路径/到/资源）。然后（功能（响应）{
                人=响应;
                返回响应;
            }）;
        }，
        GetPerson：功能（personNo）{
            对于（i = 0; I＆LT; people.length;我++）{
                如果（人[I] .personNo == personNo）{
                    返回的人[我]
                }
            }
        }
    }
}]）;
 

接下来，我们mainctrl我们将要调用函数GetPeople

  .controller（mainctrl，['PeopleService'，函数（PeopleService）{
    PeopleService.GetPeople（）。然后（功能（人）{
        $ scope.people =人;
    }）;
}]）;
 

最后，在我们的detailsctrl，我们将从$ routeParams得到personNo并用它来从我们的服务调用GetPerson方法。

<$p$p><$c$c>.controller(\"detailctrl\",['$routeParams','PeopleService',function($routeParams,PeopleService){
    VAR personNo = $ routeParams.no;
    $ scope.person = PeopleService.GetPerson（personNo）;
}]）;

I have a list. What I want is when I click on one of the item of List a new page should open where the data related to only that listItem is displayed. Right now I am using anchor tag and .config to pass data like this:

<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>

And

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

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

I don't think this is an effective way to pass data. Although I know about .service but I can't figure out a way to pass data specific to the item clicked. Please suggest a better way. Thanks

解决方案

What you're looking at is the classic master detail pattern that you indeed would want to use a service (or factory) for.

First change I'll make to your code is giving the main route a controller, as well as for the details route only passing in the personNo.

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

Next, let's set up a "PeopleService" via a factory with two methods. One, is the GetPeople method which gets all the people in an array and resolves a promise via $http before storing it in a private variable. The GetPerson method looks up a person by personNo in that private variable.

.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];
                }
            }
        }
    }
}]);

Next, in our mainctrl we will want to call that GetPeople function.

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

Finally, in our detailsctrl, we will get the personNo from the $routeParams and use it to call the GetPerson method from our service.

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

这篇关于从一个控制器传递到另一个特定的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！