在$state.go之后在控制器之间传递数据

pass data between controller after $state.go?

本文关键字：数据 之间 之后 state go 控制器      更新时间：2023-10-21

想象一下，我在存储控制器中有一个项目列表。然后用户点击其中一个项目，它使用另一个控制器，我如何在项目控制器中获取项目？

.controller('store', function($scope,$http,$state) {
    $http({
        method: 'GET',
        url: $rootScope.hostname + '/api/products',
      }).then(function successCallback(response) {
        $scope.items = response.data.product;
      }, function errorCallback(response) {
        alert(response.data)
      });
      $scope.GoItem = function(data){
        //data
        $state.go('app.item');
      }
})
.controller('item', function($scope,$http) {
   //how to get the data here?
})
编辑：我弄错了这个问题。由于您试图在控制器之间进行传递，因此有几个选项。
  1. 使用$rootScope。此范围在整个应用程序中共享
  2. 使用服务。将http调用作为函数存储在内部

使用$stateParams执行此操作。

app.controller('store', function($scope, $http, $state) {
  $scope.items = [{
     'id': "1234",
     'name': 'XYZ'
  }, {
      'id': "123456",
      'name': 'ABC'
  }]
  $scope.GoItem = function(data) {
     $state.go('app-item', {
       'item': JSON.stringify(data)
   });
 }
})
app.controller('item', function($scope, $http, $stateParams) {
   console.log(JSON.parse($stateParams.item))
   $scope.item = JSON.parse($stateParams.item)
     //how to get the data here?
})

创建了工作Plunker。希望它能解决你的问题。https://plnkr.co/edit/tpl:8rFfZljYNl3z1A4LKSL2?p=preview

您可以将params作为$state.go('app.item', {'item':'my item'});中的第二个参数发送。然后解析状态配置中的params，并将解析的项传递给控制器。

.controller('StoreCtrl', function($scope,$http,$state) {
    $http({
        method: 'GET',
        url: $rootScope.hostname + '/api/products',
      }).then(function successCallback(response) {
        $scope.items = response.data.product;
      }, function errorCallback(response) {
        alert(response.data)
      });
      $scope.GoItem = function(data){
        //data
        $state.go('app.item', {'itemData', myItem});
      }
})
.controller('ItemCtrl', function($scope, $http, itemData) {
   //how to get the data here?
})

在您的状态配置中：

$stateProvider
.state('store', {
  url:'/store',
  templateUrl: 'store.html',
  controller: 'StoreCtrl'
})
.state('item', {
  url:'/item',
  templateUrl: 'item.html',
  controller: 'ItemCtrl',
  params: {
    myItem: ''
  },
  resolve: {
    name: function($stateParams) {
      return $stateParams.myItem;
    }
  }
})

还有一个选项可以是$state.go（'app.item'，｛param1:var1，param2:var2｝）
希望对您有所帮助和期待。https://forum.ionicframework.com/t/pass-data-with-state-go/2897/2

如果您想将这些数据传递到应用程序上的任何位置。使用$rootScope$广播

例如：

.controller('StoreCtrl', function($scope,$http,$state,$rootScope) {
    $http({
        method: 'GET',
        url: $rootScope.hostname + '/api/products',
      }).then(function successCallback(response) {
        $scope.items = response.data.product;
      }, function errorCallback(response) {
        alert(response.data)
      });
      $scope.GoItem = function(data){
        //data
        $rootScope.$broadcast("passData", yourdata);
        $state.go('app.item');
      }
})

在您的第二个控制器上：

    .controller('item', function($scope,$http) {
      $scope.$on("passData", function(dataRecieved) {
    console.log(dataRecieved);
     });
})

您也可以使用$stateParams。这更像是角度2方法（EventEmitter）。

相关文章：