$state와 함께 $state 메서드 사용Angular UI 라우터의 ChangeStart to State 및 fromState
나는 핸들러를 쓰고 있다.$stateChangeStart
:
var stateChangeStartHandler = function(e, toState, toParams, fromState, fromParams) {
if (toState.includes('internal') && !$cookies.MySession) {
e.preventDefault();
// Some login stuff.
}
};
$rootScope.$on('$stateChangeStart', stateChangeStartHandler);
toState
에는 include 메서드가 없습니다.뭔가 다른 일을 해야 할까요? 아니면 제가 하려는 일을 할 방법이 있을까요?
또한 //일부 로그인 정보에는$state.go(...)
무한 루프가 발생합니다.그 원인은 무엇입니까?
다음은 우리가 최종적으로 해야 할 일을 보여주는 보다 완벽한 예입니다.
angular.module('test', ['ui.router', 'ngCookies'])
.config(['$stateProvider', '$cookiesProvider', function($stateProvider, $cookiesProvider) {
$stateProvider
.state('public', {
abstract: true
})
.state('public.login', {
url: '/login'
})
.state('tool', {
abstract: true
})
.state('tool.suggestions', {
url: '/suggestions'
});
}])
.run(['$state', '$cookies', '$rootScope', function($state, $cookies, $rootScope) {
$rootScope.$on('$stateChangeStart', function(e, toState, toParams, fromState, fromParams) {
if (toState.name.indexOf('tool') > -1 && !$cookies.Session) {
// If logged out and transitioning to a logged in page:
e.preventDefault();
$state.go('public.login');
} else if (toState.name.indexOf('public') > -1 && $cookies.Session) {
// If logged in and transitioning to a logged out page:
e.preventDefault();
$state.go('tool.suggestions');
};
});
});
사용하는 것을 좋아하지 않습니다.indexOf
특정 상태를 검색하다toState
순진하게 느껴져요.왜 그랬는지 모르겠다toState
그리고.fromState
의 예가 될 수 없다$state
서비스, 또는 그 이유$state
서비스가 메서드에서 상태 구성 재정의를 수락할 수 없습니다.
무한 루핑은 우리 측의 실수로 인해 발생했어요.난 이게 싫어서 더 나은 답을 찾고 있어.
제안 1
개체를 추가할 때$stateProvider.state
그런 다음 해당 개체가 상태와 함께 전달됩니다.따라서 나중에 필요할 때 읽을 수 있는 추가 속성을 추가할 수 있습니다.
루트 설정 예시
$stateProvider
.state('public', {
abstract: true,
module: 'public'
})
.state('public.login', {
url: '/login',
module: 'public'
})
.state('tool', {
abstract: true,
module: 'private'
})
.state('tool.suggestions', {
url: '/suggestions',
module: 'private'
});
그$stateChangeStart
이벤트에서는, 에 액세스 할 수 있습니다.toState
그리고.fromState
물건들.이러한 상태 개체에는 구성 속성이 포함됩니다.
커스텀 모듈 속성 확인 예
$rootScope.$on('$stateChangeStart', function(e, toState, toParams, fromState, fromParams) {
if (toState.module === 'private' && !$cookies.Session) {
// If logged out and transitioning to a logged in page:
e.preventDefault();
$state.go('public.login');
} else if (toState.module === 'public' && $cookies.Session) {
// If logged in and transitioning to a logged out page:
e.preventDefault();
$state.go('tool.suggestions');
};
});
저는 당신의 질문의 범위를 벗어난다고 생각하여 쿠키의 논리를 바꾸지 않았습니다.
제안 2
Helper를 생성하여 보다 모듈식으로 작업할 수 있습니다.
가치publicStates
myApp.value('publicStates', function(){
return {
module: 'public',
routes: [{
name: 'login',
config: {
url: '/login'
}
}]
};
});
가치privateStates
myApp.value('privateStates', function(){
return {
module: 'private',
routes: [{
name: 'suggestions',
config: {
url: '/suggestions'
}
}]
};
});
도우미
myApp.provider('stateshelperConfig', function () {
this.config = {
// These are the properties we need to set
// $stateProvider: undefined
process: function (stateConfigs){
var module = stateConfigs.module;
$stateProvider = this.$stateProvider;
$stateProvider.state(module, {
abstract: true,
module: module
});
angular.forEach(stateConfigs, function (route){
route.config.module = module;
$stateProvider.state(module + route.name, route.config);
});
}
};
this.$get = function () {
return {
config: this.config
};
};
});
이제 도우미를 사용하여 상태 Configuration에 상태 Configuration을 추가할 수 있습니다.
myApp.config(['$stateProvider', '$urlRouterProvider',
'stateshelperConfigProvider', 'publicStates', 'privateStates',
function ($stateProvider, $urlRouterProvider, helper, publicStates, privateStates) {
helper.config.$stateProvider = $stateProvider;
helper.process(publicStates);
helper.process(privateStates);
}]);
이렇게 하면 반복된 코드를 추상화하여 보다 모듈화된 솔루션을 만들 수 있습니다.
주의: 위의 코드는 테스트되지 않았습니다.
언급URL : https://stackoverflow.com/questions/21891218/using-state-methods-with-statechangestart-tostate-and-fromstate-in-angular-ui
'sourcetip' 카테고리의 다른 글
AngularJS의 'ng-filter'는 최대 1000개의 요소 배열에서 매우 느립니다. (0) | 2023.02.09 |
---|---|
번역 날짜("d F Y (H:i) 함수 php (0) | 2023.02.09 |
프로덕션 빌드의 Create-React-App 프록시 (0) | 2023.02.09 |
Wordpress: WP_커스텀 투고 타입으로 검색 조건을 적용하는 방법을 문의합니다. (0) | 2023.02.09 |
Angular를 사용하여 URL에 검색 매개 변수를 추가하는 방법JS UI 라우터 .go()? (0) | 2023.02.09 |