我有一个使用 ui-router
的 Angular
应用程序,每当我刷新页面时都会遇到问题。我正在使用嵌套 View 、命名 View 来构建应用程序。每当我刷新页面时,ui-router
都不会重新加载当前状态,只会将页面留空。
在页面加载时 $state.current
等于
Object {name: "", url: "^", views: null, abstract: true}
我正在通过 $http
从 .json
文件中读取我的导航并循环遍历状态。所以这就是我可以展示的:
stateProvider.state(navElement.stateName, {
url: navElement.regexUrl ? navElement.regexUrl : url,
searchPage: navElement.searchPage, //something custom i added
parent: navElement.parent ? navElement.parent : "",
redirectTo: navElement.redirectTo,
views: {
'subNav@index': {
templateUrl: defaults.secondaryNavigation,
controller: 'secondaryNavigationController as ctrl' //static
},
'pageContent@index': {
template: navElement.templateUrl == null
? '<div class="emptyContent"></div>'
: undefined,
templateUrl: navElement.templateUrl == null
? undefined
: navElement.templateUrl,
controller: navElement.controller == null
? undefined
: navElement.controller + ' as ctrl'
}
}
});
此代码针对嵌套的 json 对象中的每个项目执行。如果还有其他任何有用的信息,请告诉我。
最佳答案
有一个问题:AngularJS - UI-router - How to configure dynamic views有一个答案,它展示了如何做到这一点。
What is happening? On refresh, the
url
is evaluated sooner, then states are registered. We have to postpone that. And solution is driven byUI-Router
native featuredeferIntercept(defer)
$urlRouterProvider.deferIntercept(defer)
如文档中所述:
Disables (or enables) deferring location change interception.
If you wish to customize the behavior of syncing the URL (for example, if you wish to defer a transition but maintain the current URL), call this method at configuration time. Then, at run time, call
$urlRouter.listen()
after you have configured your own$locationChangeSuccess
event handler.
简而言之,我们将在配置阶段停止 URL 处理:
app.config(function ($urlRouterProvider) {
// Prevent $urlRouter from automatically intercepting URL changes;
// this allows you to configure custom behavior in between
// location changes and route synchronization:
$urlRouterProvider.deferIntercept();
})
一旦我们从 JSON 配置了所有动态状态,我们将在 .run() 阶段重新启用它:
.run(function ($rootScope, $urlRouter, UserService) {
...
// Once the user has logged in, sync the current URL
// to the router:
$urlRouter.sync();
// Configures $urlRouter's listener *after* your custom listener
$urlRouter.listen();
});
关于AngularJs UI-Router - 页面刷新 $state.current 现在是空的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29942522/