如何在 Ionic 应用程序中的页面之间传递数据

Question

我查看了周围的所有示例并尝试与我的 Ionic 项目集成但失败了。这是我目前所拥有的。

我正在使用使用 creator.ionic.com 创建的项目

我有一个将 JSON 文件加载到的 html 页面

(agentSchedule.html)

<ion-view style="" title="Agent Schedule">
 <ion-content class="has-header" overflow-scroll="true" padding="true">
  <ion-refresher on-refresh="doRefresh()">
    </ion-refresher>
    <div ng-controller="agentScheduleCtrl">
      <ion-list style="">
          <ion-item  class="item-icon-right item item-text-wrap item-thumbnail-left" ng-repeat="user in users">
            <img ng-src="{{ user.image }}">
          <h2>{{ user.fname }} {{ user.lname }}</h2>
          <h4>Role : {{ user.jobtitle }}</h4>
          <h4>Username : {{ user.username }}</h4><i class="button-icon icon ion-ios-arrow-forward"></i>
          </ion-item>
      </ion-list>
  </div>
</ion-content>

这是该页面的控制器和路由

.controller('agentScheduleCtrl', function($scope, $http, $timeout) {
  var url = "http://www.otago.ac.nz/itssd-schedule/mobileappdevice/services/getUsers.php";
  var url = "users.json";
  $http.get(url).success( function(response) {
      $scope.users = response;
});

.state('menu.agentSchedule', {
  url: '/page4',
  views: {
  'side-menu21': {
    templateUrl: 'templates/agentSchedule.html',
    controller: 'agentScheduleCtrl'
    }
  }
})

我是另一个页面，我想将用户名传递到，然后在我从那里转到的任何页面上使用

(specificAgentDetails.html)

<ion-view style="" view-title="Agent Specific Schedule">
<ion-content class="has-header" overflow-scroll="true" padding="true">

</ion-content>
</ion-view>

这是该页面的控制器和路由

.controller('specificAgentDetailsCtrl', function($scope) {

})

.state('menu.specificAgentDetailsCtrl', {
url: '/page9',
views: {
  'side-menu21': {
    templateUrl: 'templates/specificAgentDetailsCtrl.html',
    controller: 'specificAgentDetailsCtrl'
  }
}
})

如何将 user.username JSON 变量作为全局变量传递到下一页？？

任何帮助都会很棒 - 我在兜圈子

Answer 1

所以@shershen 所说的是，大多数离子应用程序都设置为 SPA，你要做的不是“离子”的东西，它更像是 AngularJS 的东西。您将需要设置一个服务来保存您的用户信息，然后与您的其他控制器共享。

1. 创建工厂以共享数据。
2. 将工厂注入第一个控制器并设置它。
3. 将工厂注入第二个控制器并检索它。

Share data between AngularJS controllers

如果您熟悉 OOP 中的 get/set，您应该没有问题。

.factory('Data', function () {
var user = {};
return {
    getUser: function () {
        return user;
    },
    setUser: function (userparameter) {
        user = userparameter;
    }
};
})
.controller('agentScheduleCtrl', function($scope, $http, $timeout, Data) {
 var url = "http://www.otago.ac.nz/itssdschedule/mobileappdevice/services/getUsers.php";
 var url = "users.json";
$http.get(url).success( function(response) {
  Data.setUser(response);
  $scope.users = response;
});

然后在你的第二个控制器中：

.controller('specificAgentDetailsCtrl', function($scope, Data) {
   $scope.user = Data.getUser();
})

确保视图和控制器之间的语法正确。我正在使用用户，您正在使用用户，在您的控制器中设置断点以查看那里发生了什么。

Answer 2

我使用一个小型通用工厂来完成这项工作。

.factory('LocalRepo', function () {
    var data = {}
    return {
        Get: function (key) {
            return data.key;
        },
        Set: function (key, val) {
            return data.key = val;
        }
    }
})

.controller('One', function($scope, LocalRepo) {
    //Set in first controller
    //TODO: $scope.users = .... from your call
    LocalRepo.Set('users', $scope.users);
})

.controller('Two', function($scope, LocalRepo) {
    //Get in second controller
    $scope.users = LocalRepo.Get('users');
})

用它在控制器之间设置你想要的任何东西

Answer 3

这是一个非常简单的解决方案。使用$window，它将保存全球所有控制器、服务或任何东西等可用的数据。

.controller('agentScheduleCtrl', function($scope, $http, $timeout,$windows) {
    $window.users = [];
    var url = "http://www.otago.ac.nz/itssd-schedule/mobileappdevice/services/getUsers.php";
    var url = "users.json";
    $http.get(url).success( function(response) {
        $window.users = response;
    });
})

在其他控制器中注入$window作为依赖，你可以像$window.users一样访问它。

希望对某人有所帮助。