P
P
Pavel Shorokhov2015-01-29 16:52:25
Angular
Pavel Shorokhov, 2015-01-29 16:52:25

How to disable redrawing of views in 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'
          },
          '[email protected]' : {
            templateUrl: 'component/topbar/topbar.html'
          },
          '[email protected]' : {
            templateUrl: 'component/pager/pager.html'
          }
        }
      })
      .state('settings', {
        templateUrl: 'component/settings/settings.html'
      })
    ;

Переход в settings:
$state.go('settings');
UPD: stackoverflow.com/questions/28217870/angular-ui-ro...

Answer the question

In order to leave comments, you need to log in

2 answer(s)
M
Mikhail Osher, 2015-01-29
@comm1x

As far as I know, this is impossible. Try this:
// upd
Alternatively, create a factory that will store the state. Save on destruction, load on initialization. It is the redrawing of the DOM tree during the transition that will ALWAYS be.
Here is a small example of what I want to convey.

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

D
Dmitry Dedukhin, 2015-01-29
@Demetros

If we are talking about requests to api, then they can be moved to the resolve state, which can be made the parent for all states - then resolve will not be executed every time when switching between child states.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question