我将UI路由器用于主菜单的选项卡以及一种状态(用户)内的链接。用户状态有一个用户列表,当单击一个用户时,我只想重新加载子状态,但是它正在重新加载子状态和父状态(用户)。
这是我的代码:
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.userTreeClick = function(e) { contextInfo.setUserKey(e.Key); contextInfo.setUserName(e.Value); userCtrl.userKey = e.Key; $state.forceReload(); };
假设我处于users.userGroups状态,当我单击另一个用户时,只希望重新加载users.userGroups状态。这可能吗?我已经在Google和StackOverflow上找到了答案,但是没有找到与我要尝试的完全一样的东西。当我中断检查$ state。$ current.name时-名称正确-users.userGroups,但是它重新加载了所有内容,而不仅仅是子状态。很感谢任何形式的帮助!
如API参考中所述,我们可以使用 $state.reload :
$state.reload
[$ state.reload(状态)](http://angular-ui.github.io/ui- router/site/#/api/ui.router.state.$state#methods_reload) 一种强制重新加载当前状态的方法。重新解析所有解决方案,重新设置控制器,并重新触发事件。 参数: state (可选的) 状态名称或状态对象,它是要重新解析的解析的根。
router/site/#/api/ui.router.state.$state#methods_reload)
一种强制重新加载当前状态的方法。重新解析所有解决方案,重新设置控制器,并重新触发事件。
参数:
state
一个例子:
//will reload 'contact.detail' and 'contact.detail.item' states $state.reload('contact.detail');
我们可以使用 $state.go() 和及其options参数来实现类似的效果:
$state.go()
options
[$ state.go(to,params,options)](http://angular-ui.github.io/ui- router/site/#/api/ui.router.state.$state#methods_go) … options (可选的) location … inherit … relative … notify … reload(v0.2.5)-{boolean = false | string | object},如果为true,则即使状态或参数没有变化,也将强制转换。它将重新加载当前状态和父状态的解析和视图。 如果reload是一个字符串(或状态对象),则将获取状态对象(按名称或对象引用);否则,将获取状态对象。 \过渡会重新加载该匹配状态及其所有子状态的解析和视图。
router/site/#/api/ui.router.state.$state#methods_go)
…
location
inherit
relative
notify
reload
克里斯T的https://github.com/angular-ui/ui- router/issues/1612#issuecomment-77757224中的示例:
{ reload: true } // reloads all, { reload: 'foo.bar' } // reloads top.bar, and any children { reload: stateObj } // reloads state found in stateObj, and any children
一个例子
$state.go('contact', {...}, {reload: 'contact.detail'});