comm1x
@comm1x
Web-developer

Как отлючить перерисовку views в AngularJS?

Ionic Framework, UI Router ($stateProvider), Nested Views

В мобильном приложении когда нажимаю кнопочку '< Back' в header-е, предыдущая view в стеке (на которую мы должны сейчас вернуться) появляется не в том, состоянии с которого мы с нее ушли, а в новом. По сути там заново происходит вся инициализация и прочие ненужные вещи.

Вопрос: как отключить этот rerendring и сохранять состояние view и возвращаться в это состояние.

Немного кода для наглядности:

// Method app.config()
$stateProvider
			.state('main', {
				url: '',
				views: {
					'@' : {
						templateUrl: 'layout/main.html'
					},
					'topbar@main' : {
						templateUrl: 'component/topbar/topbar.html'
					},
					'content@main' : {
						templateUrl: 'component/pager/pager.html'
					}
				}
			})
			.state('settings', {
				templateUrl: 'component/settings/settings.html'
			})
		;


Переход в settings:
$state.go('settings');

UPD: stackoverflow.com/questions/28217870/angular-ui-ro...
  • Вопрос задан
  • 2438 просмотров
Решения вопроса 1
miraage
@miraage
Старый прогер
Насколько я знаю - такое невозможно. Попробуйте так:
$state.transitionTo('settings');

// upd

Как вариант - создать factory, который будет хранить состояние. Сохранять при уничтожении, загружать при инициализации. Именно перерисовка DOM дерева при переходе будет ВСЕГДА.
Вот небольшой пример того, что я хочу донести.
app.factory('StatePersist', function() {
  var store = {};
  
  function getItem(state, stateParams) {
    return store[getKey(state, stateParams)];
  }
  
  function writeItem(state, stateParams, scope) {
    store[getKey(state, stateParams)] = scope;
  }
  
  function getKey(state, stateParams) {
    return [state, angular.toJson(stateParams)].join('_');
  }
  
  return {
    read: readItem,
    write: writeItem
  };
});

app.controller('ProductsCtrl', function($scope, $state, $stateParams, StatePersist) {
  // Инициализация контроллера...
  
  // angular.extend корректно обработает undefined
  // если ничего не было сохранено
  angular.extend($scope, StatePersist.getItem($state.current.name, $stateParams));
  
  // Записываем данные при уничтожении
  $scope.$on('$destroy', function() {
    StatePersist.write($state.current.name, $stateParams, $scope);
  });
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Demetros
Если речь идет про запросы к api, то их можно вынести в resolve стэйта, который сделать родительским для всех стэйтов - тогда resolve не будет выполняться каждый раз при переходах между дочерними стэйтами.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы