Question

我正在建立一个基于MEAN的网站。现在我试图将数据从一个控制器传递到下一个控制器，但我似乎没有完成它。选择某个选项后，我想将此值带到下一页

这是包含选择框的页面：

<div class="plumber-by-city col-sm-12 home-text-col" ng-controller="DataCtrl">
<div class="title-1">Search by cityname</div>
   <select ng-model="selectedItem" ng-change="change()" ng-options="item as item.city for item in items"></select><span class="fa fa-caret-down"></span>
</div>

在更改时，我想将selectedItem传递给使用DataCtrl2的下一页

这是我的DataCtrl：

app.controller('DataCtrl', function($scope,$http,getData,$location,$routeParams){

   getData.getCity($scope);

   $scope.change = function() {
      $location.path('/plumber-in/' + $scope.selectedItem.city);
   };
});

从DB中检索数据的服务：

app.factory('getData', function($http){
  return {
     getCity: function($scope){
       return $http.get("/getdata").then(function(response){
         $scope.items = response.data;
         $scope.selectedItem = response.data[0];
       });
     }
   };
});

现在我不知道在第二页的DataCtrl2中放入什么，以及如何在本页中使用DataCtrl中的数据

Answer 1

您需要的是服务中的Setter和Getter方法。像这样的东西

app.controller('DataCtrl', 
    function($scope,$http,getData,$location,$routeParams){

   getData.getCity().then(function(response) {
      $scope.items = response.data;
      $scope.selectedItem = response.data[0];
   });

   $scope.change = function() {
      // sets the data to the service
      getData.setItem($scope.selectedItem);

      $location.path('/plumber-in/' + $scope.selectedItem.city);         
   };

});

app.factory('getData', function($http){
  return {
     getCity: function(){
       return $http.get("/getdata");
     },

     setItem: function(item) {
         this.item = item;
     },

     getItem: function() {
         return this.item;
     }
   };
});

app.controller('DataCtrl2', 
    function($scope, $http, getData,$location,$routeParams){
        // get the data from the service
        getData.getItem();
});

Answer 2

不要在工厂内使用$scope。只需将请求 - 承诺返回给控制器并在那里执行逻辑。

app.factory('getData', function($http){
  return {
     getCity: function(){
       return $http.get("/getdata");
     }
   };
});

像这样修改控制器

app.controller('DataCtrl', function($scope,$http,getData,$location,$routeParams){

   getData.getCity().then(function(response) {
      $scope.items = response.data;
      $scope.selectedItem = response.data[0];
   });

   $scope.change = function() {
      $location.path('/plumber-in/' + $scope.selectedItem.city);
   };
});

使用另一个控制器中的数据

2 个答案: