Как передавать данные между страницами в приложении Ionic

Я просмотрел все примеры и попытался интегрироваться с моим 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'
  }
}
})

Как передать переменную JSON user.username на следующую страницу в качестве глобальной переменной??

Любая помощь будет потрясающей - я иду по кругу

Источник

3 ответа

Решение

То, что @shershen сказал, правда, большинство ионных приложений настроено как SPA, то, что вы собираетесь делать, это не "ионная" вещь, а скорее AngularJS. Вы захотите настроить Сервис для хранения информации о пользователе, а затем поделиться ею с другими контроллерами.

  1. Создайте Фабрику, чтобы поделиться данными.
  2. Введите завод в первый контроллер и установите его.
  3. Введите фабрику во второй контроллер и получите его.

Обмен данными между контроллерами AngularJS

Если вы знакомы с 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();
})

Убедитесь, что синтаксис между представлением и контроллерами правильный. Я использую пользователя, которого вы используете пользователи, устанавливая точки останова в ваших контроллерах, чтобы посмотреть, что там происходит.

Источник

Вот довольно простое решение. использование $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,

Надеюсь, это поможет кому-то.

Источник

Я использую небольшую универсальную фабрику, чтобы сделать работу.

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

Используйте его для установки того, что вы хотите между контроллерами

Источник
Другие вопросы по тегам