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

前端之家收集整理的这篇文章主要介绍了AngularJS UI路由器$state仅重新加载子状态前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用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状态被重新加载。这可能吗?我已经通过谷歌和StackOverflow找到了一个答案,但我没有发现任何与我正在尝试的东西完全一样。当我断开检查$状态$ current.name – 名称是正确的 – users.userGroups,但它重新加载所有,而不仅仅是子状态。任何帮助非常感谢!

如API Reference所述,我们可以使用$ state.reload:

07000

A method that force reloads the current state. All resolves are
re-resolved,controllers reinstantiated,and events re-fired.

Parameters:

  • state (optional)
    • A state name or a state object,which is the root of the resolves to be re-resolved.

一个例子:

//will reload 'contact.detail' and 'contact.detail.item' states
$state.reload('contact.detail');

类似的,我们可以用$ state.go()和它的options参数来实现:

07001

  • options (optional)
    • location
    • inherit
    • relative
    • notify
    • reload (v0.2.5) – {boolean=false|string|object},If true will force transition even if no state or params have changed. It will
      reload the resolves and views of the current state and parent states.
      If reload is a string (or state object),the state object is fetched (by name,or object reference); and \ the transition reloads the
      resolves and views for that matched state,and all its children
      states.

例如https://github.com/angular-ui/ui-router/issues/1612#issuecomment-77757224 by Chris T:

{ 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'});
原文链接:https://www.f2er.com/angularjs/144780.html

猜你在找的Angularjs相关文章