AngularJS UI 라우터 $state reload child 상태만

AngularJS UI 라우터 $state reload child 상태만

메인 메뉴의 탭이나 상태(사용자) 내의 링크에 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.disc(주)

현재 상태를 강제로 새로고침하는 방식입니다.모든 해결이 다시 해결되고 컨트롤러가 다시 설치되며 이벤트가 다시 실행됩니다.

파라미터:

• state (옵션)
  • 상태 이름 또는 상태 개체. 다시 확인할 해결 루트입니다.

예:

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

A와 그 기능을 통해 달성할 수 있는 것과 같은options파라미터:

$state.go(수신처, 파라미터, 옵션)

...

• options(옵션)
  • location...
  • inherit...
  • relative...
  • notify...
  • reload(v0.2.5) - {syslog=false|string|object}, true인 경우 상태 또는 매개 변수가 변경되지 않았더라도 강제로 전환됩니다.현재 상태 및 부모 상태의 해결 및 보기를 새로고침합니다.reload가 문자열(또는 state object)인 경우 state object는 (이름 또는 오브젝트 참조에 의해) Import됩니다.또한 \transition에 의해 일치된 상태 및 모든 자녀 상태의 해결 및 뷰가 새로고침됩니다.

https://github.com/angular-ui/ui-router/issues/1612#issuecomment-77757224의 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'});

현재 UI 라우터(0.2.14 이상)에서 자식 상태를 다시 로드하기 위한 지원이 추가되었습니다.

간단히 말하면$state.go('your_state', params, {reload: 'child.state'});그 일을 할 수 있을 거야

참조: https://github.com/angular-ui/ui-router/pull/1809/files 및 https://github.com/angular-ui/ui-router/pull/1809/files

나는 그것을 작동시켰다.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 }); 

다른 신입사원을 위한 참고 자료입니다.

에 URL을 추가한 후.state callsapi api api api api api api api api api api api api api api api c은 url은 url의 url입니다..state하면 /API URL:

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

난 이걸 헤쳐나가려고 꽤 흥미로운 것들을 보고 배웠어...

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

그러면 원하는 대로 해당 자식 상태만 새로고침됩니다.국가의 전체 계층이 아닙니다.

언급URL : https://stackoverflow.com/questions/25316591/angularjs-ui-router-state-reload-child-state-only