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，你要做的不是“离子”的东西，它更像是AngularJS的东西。您将要设置一个服务来保存您的用户信息，然后与其他控制器共享。

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

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 app中的页面之间传递数据

3 个答案: