导航回状态而不重新加载模板

时间:2017-06-13 09:03:33

标签: angularjs angular-ui-router

我做了一些研究,但无法找到明确的答案。我有主要的应用领域,我加载不同的屏幕。从一个屏幕我想打开一个覆盖整个屏幕的页面。因此,导航到“观看报道”'就是这么做的。当我点击浏览器的后退按钮或在整个屏幕页面上拥有我自己的后退按钮时,我想回到之前的状态而不重新加载其模板和控制器。换句话说,我希望在打开整个屏幕页面之前看到我所做的所有选择。这是我的州配置:

$stateProvider
        .state('body', {
            url: '/',
            abstract: true,
            template: '<div ui-view />'
        })
        .state('viewreport', {
            url: 'viewreport',
            templateUrl: 'wholescreen.html',
            controller: 'wholescreenController'
    });

我正在将不同的模块装入主体&#39;状态可能如下所示:

function ($stateProvider) {
    $stateProvider.state('body.htmlreports', {
        templateUrl: function ($stateParams) {
                return 'htmlReports.html';
        },
        controller: 'htmlReportsController',
        url: 'htmlreports',
    }).state('body.htmlreports.reportarea', {
        templateUrl: 'htmlReportParams.html',
        controller: 'htmlReportParamsController',
    });

我从htmlReportParamsController控制器导航到viewreport状态。然后新页面将打开整个屏幕。那部分工作正常。但是,当点击浏览器的“后退”按钮时,导航回到htmlreports会重新加载&#39; body.htmlreports&#39;州。有没有办法在不重新加载模板的情况下回到它?

更新。为什么我认为它不重复。 在发布之前,我尝试了其中的建议。这:$state.transitionTo('yourState', params, {notify: false});

仍在重新加载你的状态&#39;。此外,提供的链接中的用例并不完全像我的。因为当我在整个屏幕上加载新视图时,OP对已加载的视图使用编辑模式。

由于

1 个答案:

答案 0 :(得分:0)

使用

$window.history.back();

在控制器的依赖注入中添加$ window。这将刷新您的页面,不会重新加载我们选择的数据。

请保持这样的状态

function ($stateProvider) {
$stateProvider.state('body.htmlreports', {
    templateUrl: function ($stateParams) {
            return 'htmlReports.html';
    },
    controller: 'htmlReportsController',
    url: 'htmlreports',
}).state('body.htmlreports.reportarea', {
    templateUrl: 'htmlReportParams.html',
    controller: 'htmlReportParamsController',
}).state('body.htmlreports.reportarea.viewreport', {
    url: 'viewreport'
});