Javascript 在另一个控制器中使用来自一个控制器的数据

我正在做一个基于平均值的网站。现在，我试图将数据从一个控制器传递到下一个控制器，但似乎无法完成。选择某个选项后，我希望将该值带到下一页

这是带有选择框的页面：

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

以及从数据库检索数据的服务：

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中的数据。只需将请求承诺返回给控制器，并在其中执行您的逻辑

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

不要在工厂内使用$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);
   };
});

---

您需要的是服务中的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();
});

---

您需要的是服务中的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();
});

---

---

可以创建一个工作的JSFIDLE吗？您可以使用服务在控制器之间使用setter/getter持久化活动城市，或使用stateparams将此数据传输到下一个状态。@Larsmanson:简单一点，从factory\service返回承诺，并在控制器中求值。：@我怎么能这样做呢。我不熟悉that@Larsmanson：参见下面的答案，sachila也做了同样的事情。是否可以创建一个工作的JSFIDLE？您可以使用服务在控制器之间使用setter/getter持久化活动城市，或使用stateparams将此数据传输到下一个状态。@Larsmanson:简单一点，从factory\service返回承诺，并在控制器中求值。：@我怎么能这样做呢。我不熟悉that@Larsmanson：请参阅下面的答案，sachila也做了同样的回答。您的答案是正确的，不知道是谁投了反对票，进一步只需从getData.getCity$scope中删除$scope即可。以及工厂方法：我对你的答案投了赞成票-因为有人错投了反对票。。。这是一个可能的解决方案。。。虽然我个人更倾向于使用上述服务的答案：@萨希拉：刚刚看到你的回答。他不需要在不同的控制器之间传递选项中的选定项。你的答案如何解决这个问题？@mechanicals他将它作为参数通过“$location.path”。因此，您不需要为“当选择一个选项时，我希望将该值带到下一页”创建单独的工厂函数。我认为这个问题更多的是关于如何在控制器之间传递数据。因此，一种通用的方法是使用setter-getter方法。您的答案是正确的，不知道是谁投了反对票，只需从getData.getCity$scope中删除$scope即可。以及工厂方法：我对你的答案投了赞成票-因为有人错投了反对票。。。这是一个可能的解决方案。。。虽然我个人更倾向于使用上述服务的答案：@萨希拉：刚刚看到你的回答。他不需要在不同的控制器之间传递选项中的选定项。你的答案如何解决这个问题？@mechanicals他将它作为参数通过“$location.path”。因此，您不需要为“当选择一个选项时，我希望将该值带到下一页”创建单独的工厂函数。我认为这个问题更多的是关于如何在控制器之间传递数据。因此，一种通用的方法是使用setter-getter方法。不知何故，它不会转到另一页，而是保持不变page@Larsmanson：您是在谈论数据还是页面视图？还有一个打字错误。已更新。页面视图未更改您遇到的错误。您看到更新的更改了吗。另外，只需将我添加到您现有工作代码中的部分代码添加进去，我已经更新了您的代码，使其不传递范围。看一看。不知怎的，它不会转到另一页，而是保持不变page@Larsmanson：您是在谈论数据还是页面视图？还有一个打字错误。已更新。页面视图未更改您遇到的错误。您看到更新的更改了吗。另外，只需将我添加到您现有工作代码中的部分代码添加进去，我已经更新了您的代码，使其不传递范围。看一看