一尘不染

AngularJS UI路由器$ state仅重载子状态

angularjs

我将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,但是它重新加载了所有内容,而不仅仅是子状态。很感谢任何形式的帮助!


阅读 220

收藏
2020-07-04

共1个答案

一尘不染

如API参考中所述,我们可以使用 $state.reload

[$ state.reload(状态)](http://angular-ui.github.io/ui-

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(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是一个字符串(或状态对象),则将获取状态对象(按名称或对象引用);否则,将获取状态对象。
      \过渡会重新加载该匹配状态及其所有子状态的解析和视图。

克里斯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'});
2020-07-04