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

Question

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

我正在使用使用 creator.ionic.com

创建的项目

我有一个 html 页面，我正在将 JSON 文件加载到

(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，您要做的不是 "ionic" 事情，它更像是 AngularJS 事情。您将要设置一个服务来保存您的用户信息，然后与您的其他控制器共享。

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

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 一样访问它。

希望对大家有所帮助。

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

How to pass data between pages in Ionic app

html

angularjs

variables

ionic-framework

ngcordova