只有AngularJS UI路由器$状态重装子状态 [英] AngularJS UI Router $state reload child state only
问题描述
我使用的UI路由器为各州(用户)中的一个内链接主菜单,以及标签。用户州有一个用户列表,并单击用户时,我想只有重装孩子的状态,但它无论重装子状态和父状态(用户)。
I am using UI router for tabs of a main menu as well as for links within one of the states (users). The users state has a list of users and when a user is clicked, I want to reload the child state only, but it is reloading both the child state and the parent state (users).
下面是我的code:
app.config(function ($stateProvider, $locationProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$locationProvider.html5Mode(true);
$stateProvider
.state('home', {
abstract: true,
template: '<div ui-view=""></div>',
controller: 'HomeController as homeCtrl'
})
.state('users', {
parent: 'home',
url: '/users',
templateUrl: '/User/Index',
controller: 'UserController as userCtrl',
})
.state('users.createUser', {
templateUrl: '/User/CreateUser',
controller: 'CreateUserController as cuCtrl'
})
.state('users.editUser', {
templateUrl: '/User/EditUser',
controller: 'EditUserController as euCtrl',
resolve: {
userInfo: function (contextInfo, userData) {
return userData.get(contextInfo.getUserKey());
}
}
})
.state('users.addWebItemsForUser', {
templateUrl: '/User/AddWebItemsForUser',
controller: 'UserWebItemsController as uwiCtrl'
})
.state('users.addReportsForUser', {
templateUrl: '/User/AddReportsForUser',
controller: 'UserReportsController as urCtrl'
})
.state('users.userGroups', {
templateUrl: '/User/UserGroups',
controller: 'UserGroupController as userGroupCtrl'
})
//.state('users.logInWebApp', {
// template: '<h3>Logging into web app</h3>',
// resolve: {
// user: function() {
// return {
// //companyId: contextInfo.getCustomerKey()
// //userId:
// //password:
// }
// }
// },
// controller: function() {
// // need company code, username and password of user then need to open window with webapp url (will that work?) - do we still want to add this functionality?
// }
//})
.state('links', {
url: '/links',
templateUrl: '/Link/Index',
controller: 'LinkController as linkCtrl'
})
.state('onlrpts', {
url: '/onlineReports',
templateUrl: '/OnlineReport/Index',
controller: 'OnlineReportController as onlRptCtrl'
})
.state('reports', {
url: '/customerReports',
templateUrl: '/CustomerReport/Index',
controller: 'CustomerReportController as custRptCtrl'
});
})
.config(function($provide) {
$provide.decorator('$state', function($delegate, $stateParams) {
$delegate.forceReload = function() {
return $delegate.go($delegate.$current.name, $stateParams, {
reload: true,
inherit: false,
notify: true
});
};
return $delegate;
});
});
这是我父控制器(UserController的)功能被点击一个用户时被调用:
This is the function in my parent controller (UserController) that is called when a user is clicked:
this.userTreeClick = function(e) {
contextInfo.setUserKey(e.Key);
contextInfo.setUserName(e.Value);
userCtrl.userKey = e.Key;
$state.forceReload();
};
所以说,我是在users.userGroups状态,当我点击其他用户,我想只有users.userGroups状态重新加载。这可能吗?我已经看过在计算器通过谷歌和这里的答案,但我没有发现任何东西,这正是像什么,我试图做的。当我打破了检查$ $状态current.name - 名字是正确的 - users.userGroups,但一切都重新加载,而不是仅仅子状态。任何帮助是非常AP preciated!
So say I was in the users.userGroups state, when I click on another user, I want only the users.userGroups state to be reloaded. Is this possible? I have looked for an answer via Google and here at StackOverflow, but I haven't found anything that is exactly like what I am trying to do. When I break to check the $state.$current.name - the name is correct - users.userGroups, but it reloads everything instead of just the child state. Any help is very much appreciated!
推荐答案
本机,内置的 UI路由器
的功能是:
The native, built-in functionality of ui-router
is:
的形成一个孩子状态到另一个状态子的父是永远不会重新加载
除非我们明确地将改变这种内置的行为,例如通过装饰像你一样,迫使重装与传递这些选项:
unless we will explicitly change that built in behaviour, e.g. via decorator as you did and force the reload with passing these options:
-
{重载:真的,
继承:假的,通知:真正}
{ reload: true,
inherit: false,notify: true }
解决方法:不要强迫的重新加载 - 而不是用一些参数
为每一个孩子的(如的groupId
)的
Solution: do not force reload - instead use some Parameter
for each child (e.g. groupId
)
.state('users.userGroups', {
templateUrl: '/User/UserGroups/:groupId', // here is the groupId param defined
controller: 'UserGroupController as userGroupCtrl'
})
然后,如果导航到不同的组 - 不同的参数:的groupId将触发重载只是状态
Then, if navigating to a different group - the different parameter :groupId will trigger reload just of that state.
一个方法甚至可以是过往一些虚拟的参数,其值为null或...的String.Empty这样的URL没有改变。我试图表明,在这里:
One way could even be the passing some dummy param, which has value null or string.empty... so the url is not changing. I tried to show that here:
- http://stackoverflow.com/a/25189690/1679310
- the plunker with such switch
这篇关于只有AngularJS UI路由器$状态重装子状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!