如何在AngularJS中重新定位刷新的不同视图?

时间:2015-01-21 16:26:09

标签: javascript angularjs angular-ui-router partial-page-refresh

我正在AngularJS中开发一个应用程序。基本上,我有一个“主页”页面和一个“新项目”。在主页中,我有一个菜单,其中包含“新项目”的链接。

我按如下方式配置了$ stateProvider:

$stateProvider.state('home', {
    url: '/',
    templateUrl: 'partials/home.jsp'
}).state('newproject', {
    url: '/newproject',
    templateUrl: 'partials/new-project.html'
})

所以,当我进入应用程序时,我在主页。然后我点击“新项目”链接,我在“新项目”页面。现在网址是 http://myapp/newproject

我的问题是,当我刷新页面时,我希望在主页上重定向,即使浏览器栏中的网址仍然是 http://myapp/newproject

我如何实现这一目标?

更新:

非常感谢 squiroid 以获得答案。我使用了第二种解决方案,它就像一个魅力。稍微澄清,以防万一有人应该有同样的问题,在重定向到家之前你必须防止默认操作。所以正确的工作代码是:

$rootScope.$on("$locationChangeStart", function(event, next, current) { 

if(next==current && next=='/newproject')
    event.preventDefault();
    $state.go('home');

});

1 个答案:

答案 0 :(得分:14)

在'newproject'的控制器中使用它,它正在侦听你的刷新:

$rootScope.$on('$locationChangeStart', function(event) {
     $state.go('home');
});

或将其放在app.run();

$rootScope.$on("$locationChangeStart", function(event, next, current) { 

    if(next==current && next=='/newproject')
        $state.go('home');

});