Question

我正在创建一个Angular移动SPA应用，部分要求有大量的列表＆gt;＆gt;详情页面。在他们过滤以填充列表之后，他们可以点击该项目以转到它的详细信息页面（如果允许，使用crud选项，这将仅使用模态排除）。我正在保存服务中的相关数据和内容，但这无助于维护滚动位置和ui-router-extras粘性状态似乎是理想的。我也在使用requirejs，如果相关的话。此外，如果相关，我使用与kendo.dataSource绑定的Kendo ListView。

我已经实现了它，但我不确定我是否正确完成了它。我向下滚动并单击列表项，然后转到详细信息。当我单击后退按钮（使用$window.history.back();的指令时，虽然我尝试使用$state.go并且它做了同样的事情），它将返回并使用“缓存”版本，但将在列表的顶部。如果我向下滚动并单击另一个项目然后返回，它将保持滚动位置，就像我期望的那样。

我打开了$stickyStateProvider.enableDebug(true);，输出从第一个到后续的调用看起来都相同。

这是我的状态配置：

return app.config(function ($stateProvider, $stickyStateProvider, $urlRouterProvider) {
    $stickyStateProvider.enableDebug(true);
    $urlRouterProvider.otherwise(function ($injector, $location) {
        var $state = $injector.get("$state");
        $state.go("home");
    });
    $stateProvider.state('home', {
        url: '/home',
        templateUrl: 'app/views/home.html',
        controller: 'homeController',
        controllerAs: "vm"
    })
    .state('cmmenu', {
        url: '/cmmenu',
        templateUrl: 'app/views/cmmenu.html',
        controller: 'cmmenuController',
        controllerAs: "vm"
    })
    .state('areainquiry', {
        //sticky: true,
        abstract: true,
        url: '/areainquiry',
        templateUrl: 'app/views/areainquiry.html'
    })
    .state('areainquiry.list', {
        url: '/areainquirylist',
        views: {
            'areainquirylist@areainquiry': {
                templateUrl: 'app/views/areainquirylist.html',
                controller: 'areainquirylistController',
                controllerAs: "vm"
            }
        },
        sticky: true,
        deepStateRedirect: true
    })
    .state('areainquiry.details', {
        url: '/areainquirydetails/:areaInquiryId',
        views: {
            'areainquirydetails@areainquiry': {
                templateUrl: 'app/views/areainquirydetails.html',
                controller: 'areainquirydetailsController',
                controllerAs: "vm"
            }
        }
    })
    .state('login', {
        url: '/login',
        templateUrl: 'app/views/login.html',
        controller: 'loginController',
        controllerAs: "vm"
    });
})

以下是作为抽象父视图的areainquiry.html：

<div ui-view="areainquirylist"  ng-show="$state.includes('areainquiry.list')"></div>
<div ui-view="areainquirydetails" ng-show="$state.includes('areainquiry.details')"></div>

以下是打开此屏幕的代码。我的index.html中没有命名视图，所有到areainquiry.html的视图都使用根未命名的视图（我给它命名为“body”并更改了所有这些视图以使用它，但它有效相同）：

<div class="col-xs-6 col-md-4">
    <a class="btn btn-default fullwidth" ui-sref="areainquiry.list">
        <span class="{{ vm.areaInquiryButtonIcon }}"></span>
        <br />
        {{ vm.areaInquiryButtonText }}
    </a>
</div>

我试图想办法在没有抽象状态的情况下做到这一点，只是通过父母的询问和孩子的isainquiry.detail，但是不能让它以这种方式工作，所以走了这条路。

Answer 1

没关系。这是工作。我不确定我是如何修理它的。我正在处理另一个问题（与工厂服务有关），所以我假设修复了它。

角度ui-router与spa使用粘性状态不保留第一个后退按钮上的滚动位置

1 个答案: