Значения AngularJS $scope из ng-модели теряются со страницы на страницу в одном и том же контроллере – Ionic Framework

У меня есть эта страница, которая связывает переменную области input.countNum с вводом с помощью ng-model. Значение, отображаемое на кнопке, показывает нормально. Когда вы нажимаете кнопку на первой странице, она переходит на вторую страницу, на которой также отображается переменная области видимости. Но переменная сбрасывается до значения объявления по умолчанию в коде контроллера.

Как сохранить значение области действия из ng-модели между страницами в одном контроллере?

tab-dash.html

<ion-view view-title="Test">

  <ion-content class="padding">

    <div class="list">

        <label class="item item-input">
            <span class="input-label">Count</span>
            <input class="text-right" type="number" pattern="[0-9]*" ng-model="input.countNum">
        </label>

    </div>

    <button class="button button-full button-positive" ng-click="create()" ui-sref="tab.count">
        Count is ({{input.countNum}})
    </button>

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

controller.js

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

    $scope.input = {
        countNum: 1
    };

    $scope.create = function() {
        // Logic here
    };


})

count.html

<ion-view view-title="Count">

    <ion-nav-bar class="bar-energized">
        <ion-nav-back-button class="button-clear">
            <i class="ion-arrow-left-c"></i> Back
        </ion-nav-back-button>
    </ion-nav-bar>

  <ion-content class="padding">

    <button class="button button-full button-positive">
        ({{input.countNum}})
    </button>

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

app.js

  .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

  // Each tab has its own nav history stack:

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

  .state('tab.count', {
    url: '/count',
    views: {
      'tab-dash': {
        templateUrl: 'templates/count.html',
        controller: 'DashCtrl'
      }
    }
  })

person Chad    schedule 03.03.2015    source источник


Ответы (1)


Контроллеры не распределяются между страницами — каждый раз при использовании контроллера создается новый экземпляр. Вы также не должны ожидать, что сможете обмениваться данными из контроллера с чем-либо, находящимся за пределами этого контроллера. Если вам нужно обмениваться данными между страницами или контроллерами, вы должны использовать службу или объект «значение» для поддержания этого состояния. Другим вариантом будет передача данных между страницами с использованием параметров состояния:

ui-sref="tab.count({ input: input })"

Обратите внимание, что Ionic использует проект Angular UI Router для логики навигации, поэтому документация также относится к использованию Ionic.

person Daniel Schaffer    schedule 03.03.2015
comment
Для кода ui-sref в этом ответе я предполагаю, что мне нужно изменить параметры состояния. Не могли бы вы расширить ответ о том, как это сделать? Я новичок в AngularJS и Ionic. - person Chad; 04.03.2015
comment
См. пример в моем ответе - объект в директиве ui-sref будет передан на страницу tab.count, и вы сможете получить эти значения из службы $stateParams, которые можно внедрить в контроллер. Ionic использует Angular UI Router для навигации, поэтому вы можете просто использовать их документацию для справки: github .com/angular-ui/ui-router/wiki - person Daniel Schaffer; 04.03.2015
comment
Это было не то, на что я надеялся, но это в точку. Я закончил тем, что просто добавил некоторые параметры в маршрутизацию. .state('tab.firstTab', { url: "/details?parentID&field2" ... Спасибо за ответ. - person Chad; 09.03.2015