0

我正在创建一个 Angular 移动 SPA 应用程序，并且部分要求有大量的列表 >> 详细信息页面。在他们过滤以填充列表后，他们可以单击该项目以转到它的详细信息页面（如果允许，可以使用杂乱无章的选项，这排除了仅使用模式的可能性）。我将相关数据和事物保存在服务中，但这无助于保持滚动位置，并且 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>

我试图找出一种没有抽象状态的方法，只需通过父 areainquiry 和子 areainquiry.detail 即可，但无法以这种方式工作，所以走这条路。

4

1 回答 1

0

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

于 2015-08-21T16:04:11.927 回答