Угловой UI-маршрутизатор: как сохранить родительское состояние?

Question

Я использую IonicFramework, Angular UI Router и Nested Views.

Пример моего маршрута:

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

Я стараюсь идти от 'основной' в состояние 'настройки' - все в порядке: $ state.go ('Настройки').

Когда я пытаюсь нажать «< Назад» и вернуться, основное состояние будет возвращено в исходное состояние.

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

Вопрос: Как переключиться на другой режим, сохранив состояние предыдущего вида?

Спасибо.

Answer 1

ui-router делает ничего относительно сохранения состояния приложения. Решением здесь является использование службы, в которой вы сохраняете состояние/данные вашего приложения (в реализации AngularJS служба является одиночным).

Так в основном это:

angular.service('MyService', function() { 
    var data = {}; 

    return { 
     get: function() { 
      return data; 
     } 
    }; 
}); 

function State1Controller($scope, MyService) { // you rely on AngularJS's built-in $injector 

    $scope.data = MyService.get(); 
} 

Теперь каждый раз, когда вы используете этот контроллер, $scope.data будет указывать на ту же ссылку на объект внутри службы (это одноточечно). Таким образом, любые изменения, внесенные вами в $scope.data, будут «сохранены» независимо от того, какой контроллер вы используете или сколько изменений состояния вы выполняете.

Кроме того, имейте в виде, что делает $scope.data = {};будет разорвать этот «трюк», если вы используете его в нескольких контроллерах, загруженных в том же состоянии, как он назначает новую ссылку на $scope.data. Вы должны никогда не переписать его, если вы не знаете, что делаете.