Angular UI 路由器状态

Question

我有两种状态。一种状态是包含域的表，第二种状态是有关域的信息。该表具有可应用于表数据的过滤器（下拉选择、下拉复选框）。您可以从触发第二个状态（state1.domain）的表中点击进入域。

我的问题是，当我从 state1 中单击进入 state1.domain，然后单击返回 state1 时，如何保留过滤后的数据而不重新初始化控制器？目前，当我单击返回 state1 时，我的过滤器已被清除，表格数据也是如此。

$stateProvider
.state ('state1', {
    url: '/state1',
    views: {
        "main@": {
            controller: 'StateOneCtrl',
            templateUrl: 'folder/state1.tpl.html'
        }
    },
    ncyBreadcrumb: { label: 'State One' },
    data: { pageTitle: 'State One', showTitle: false}
})
.state('state1.domain', {
    url: '/:domain',
    views: {
        "main@": {
            controller: 'StateOneDomainCtrl',
            templateUrl: 'folder/state1-domain.tpl.html'
        }
    },
    ncyBreadcrumb: { label: '{{domain}}' },
    data: { pageTitle: 'State One Domain', showTitle: false }
})

Answer 1

使用服务

您可以将这些值存储在服务中。在您的控制器初始化时，您只需使用服务中存储的 var 设置控制器 var。

可能是最好的解决方案。

使用会话存储

在我看来，其中一种方法是使用会话存储将导航流中的过滤器存储到您的应用程序中。

在您的控制器中，您将像这样初始化过滤器变量：

$scope.filterName = sessionStorage.filterName

在每次过滤器更改时，您都会将值保存到 sessionStorage

//In your HTML on the filter
ng-change="onFilterNameChange()"

//In your JS
$scope.onFilterNameChange = function(){
    sessionStorage.filterName = $scope.filterName
}

差不多就这些了。

如果您希望能够“清理”过滤器，您也可以这样做，您可以管理一个可选的 url 参数（如 ?resetFilters=true）来清理过滤器。

使用查询参数

您也可以（如果没有那么多过滤器）像这样在 URL 中显式设置过滤器

.state ('state1', {
    url: '/state1?filter1&filter2&filter3',
    views: {
        "main@": {
            controller: 'StateOneCtrl',
            templateUrl: 'folder/state1.tpl.html'
        }
    },
    ncyBreadcrumb: { label: 'State One' },
    data: { pageTitle: 'State One', showTitle: false}
})

但您可能会被卡住，因为您无法为 URL 提供对象（而您可以为您的 sessionStorage 字符串化一个对象。

希望对您有所帮助。