Question

我正在使用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，但它重新加载所有内容而不仅仅是子状态。非常感谢任何帮助！

Answer 1

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

$state.reload(state)

强制重新加载当前状态的方法。所有结果都是   重新解决，重新安置控制器，重新启动事件。

参数：


state （可选）

状态名称或状态对象，它是要重新解析的结果的根目录。

一个例子：

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

类似我们可以使用 $state.go() 及其options参数来实现：

$state.go(to, params, options)

...


options（可选）

location ...

inherit ...

relative ...

notify ...

reload（v0.2.5） - {boolean = false | string | object}，如果为true，即使没有状态或参数更改，也会强制转换。它会   重新加载当前状态和父状态的结果和视图。   如果reload是一个字符串（或状态对象），则获取状态对象（通过名称或对象引用）;和\转换重新加载   为该匹配状态及其所有子项解析和查看   的状态。

Chris 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'});

Answer 2

当前的ui-router（0.2.14及以上版本）增加了对重新加载子状态的支持。

简单地说$state.go('your_state', params, {reload: 'child.state'});将完成这项工作。

请参阅： https://github.com/angular-ui/ui-router/issues/1612和 https://github.com/angular-ui/ui-router/pull/1809/files

Answer 3

我已经开始工作了。我使用了Radim建议的内容，但我必须将 url 元素添加到状态。

.state('users.userGroups', {
    url: '/userGroups/{userTrigger}',
    templateUrl: '/User/UserGroups',
    controller: 'UserGroupController as userGroupCtrl'
})

在我的控制器中，当用户点击链接时，我使用$state.transitionTo：

var params = angular.copy($state.params);
params.userTrigger = params.userTrigger === null ? "" : null;
$state.transitionTo($state.current, params, { reload: false, inherit: true, notify: true });

对于那里的任何其他新手来说只是一个FYI：

将网址添加到.state后，我的api调用开始出现问题。它使用我的.state中的url将URL添加到api方法中。你必须确保在你的api url中有一个领先的/：

.factory('usersInGroup', function($http) {
    return {
        get: function(groupName) {
            return $http.get('/api/UserApi/GetInGroup/' + groupName);
        }
    }

我看到并学到了一些非常有趣的东西试图混淆这个......

Answer 4

$state.transitionTo("State Here", {"uniqueRequestCacheBuster": null});

这只会根据需要重新加载该子状态。而不是整个国家的等级。

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

4 个答案:

$state.reload(state)

$state.go(to, params, options)