Angular UI Router：如何保存父状态？答案

【问题标题】：Angular UI Router: How to save parent state?Angular UI Router：如何保存父状态？
【发布时间】：2015-01-29 15:05:03
【问题描述】：

我使用 IonicFramework、Angular UI 路由器和嵌套视图。

我的路由示例：

// 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('settings')。

当我尝试单击“

我发现了一个提示here，“设置”必须是“主”的子项。但我不知道如何实现它。我所有的尝试都失败了。

问题：如何切换到另一个视图，保存上一个视图的状态？

谢谢。

【问题讨论】：

标签： angularjs angular-ui-router ionic

【解决方案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 = {};会破坏这个“技巧”，因为它会为$scope.data分配一个新的引用。 .你应该永远覆盖它，除非你知道你在做什么。

【讨论】：