AngularJS-UI 라우터-프로그래밍 방식으로 상태 추가
예를 들어 서비스와 같은 모듈 구성 후 $ stateProvider에 프로그래밍 방식으로 상태를 추가하는 방법이 있습니까?
이 질문에 더 많은 컨텍스트를 추가하기 위해 두 가지 접근 방식을 사용할 수있는 상황이 있습니다.
- 모듈 구성에 정의 된 상태에서 다시로드를 강제로 시도, 문제는 그 상태가되었습니다입니다 reloadOnSearch의 로 설정 거짓 , 내가하려고 할 때 $ state.go ( 'state.name', {새로운 : PARAM}, {다시로드 : 진실}); 아무 일도 일어나지 않습니다, 어떤 아이디어?
상태 정의
.state('index.resource.view', {
url: "/:resourceName/view?pageNumber&pageSize&orderBy&search",
templateUrl: "/resourceAdministration/views/view.html",
controller: "resourceViewCtrl",
reloadOnSearch: false,
})
- 라우팅이 제대로 작동 할 수 있도록 서비스에서로드해야하는 상태를 프로그래밍 방식으로 추가해보십시오. 가능하면 첫 번째 옵션을 사용하고 싶습니다.
업데이트 된 정보는 -edit-를 참조하십시오.
일반적으로 $stateProvider구성 단계 중에에 상태가 추가됩니다 . 런타임에 상태를 추가하려면 $stateProvider주변에 대한 참조를 유지해야합니다 .
이 코드는 테스트되지 않았지만 원하는대로 수행해야합니다. 라는 서비스를 생성합니다 runtimeStates. 이를 런타임 코드에 삽입 한 다음 상태를 추가 할 수 있습니다.
// config-time dependencies can be injected here at .provider() declaration
myapp.provider('runtimeStates', function runtimeStates($stateProvider) {
// runtime dependencies for the service can be injected here, at the provider.$get() function.
this.$get = function($q, $timeout, $state) { // for example
return {
addState: function(name, state) {
$stateProvider.state(name, state);
}
}
}
});
내가 전화 몇 가지 물건 구현 한 미래 미국 에서 UI-라우터 엑스트라 아직 존재하지 않는 상태로 매핑 URL을 같은 당신을위한 코너의 경우 약간의주의를 기울입니다. Future States는 또한 런타임 상태에 대한 소스 코드를 지연로드하는 방법을 보여줍니다. 관련된 내용을 파악 하려면 소스 코드 를 살펴보십시오 .
-편집-UI-Router 1.0+
UI 라우터 1.0, 미국 등록 할 수 있으며, 사용 런타임 등록 취소 StateRegistry.register하고 StateRegistry.deregister.
StateRegistry에 액세스하려면으로 삽입 $stateRegistry하거나 $uiRouter를 통해 삽입 하고 액세스합니다 UIRouter.stateRegistry.
UI-Router 1.0에는 상태 정의의 지연로드를 처리하고 심지어 URL로 동기화하는 Future States도 포함되어 있습니다.
Chris T가 성공했습니다! 공급자는 갈 길입니다. 당신은 그것을 창 개체, 보호기, 더 많은 보호 등으로 때릴 필요가 없습니다.
이 기사에서 그의 답변을 교차 참조하면 정말 도움이되었습니다. http://blog.xebia.com/2013/09/01/differences-between-providers-in-angularjs/#provider
이 솔루션은 구성 블록 동안 특정 모듈 $ stateProvider를 실행 블록 동안 다른 모듈에 액세스 할 수 있도록합니다.
제 상황에서는 사용자의 권한에 따라 대시 보드 상태를 동적으로 생성하고 있습니다.
내 구성 블록 중에 내 공급자가 설정되어 모듈의 stateProvider (나중에 액세스 할 수 있음)를 전달합니다.
//in dashboard.module.js
var dashboardModule = angular.module('app.modules.dashboard',[
'app.modules.dashboard.controllers',
'app.modules.dashboard.services',
'app.modules.dashboard.presentations.mileage'
])
.provider('$dashboardState', function($stateProvider){
this.$get = function(PATHS, $state){
return {
addState: function(title, controllerAs, templatePrefix) {
$stateProvider.state('dashboard.' + title, {
url: '/' + title,
views: {
'dashboardModule@dashboard': {
templateUrl: PATHS.DASHBOARD + (templatePrefix ? templatePrefix + '/' : '/') + title + '/' + title + '.view.html',
controller: controllerAs ? controllerAs : null
}
}
});
}
}
}
});그러면 내 대시 보드 상태 공급자를 창에 두드리는 대신 다른 모듈에서 사용할 수 있습니다.
그런 다음 사용자 모듈의 실행 블록 (컨트롤러)에서 대시 보드의 상태 공급자에 액세스하고 상태를 동적으로 삽입 할 수 있습니다.
var UserControllers = angular.module('app.modules.user.controllers', [])
.controller("UserLoginController", ["$state", "$dashboardState", function($state, $dashboardState){
$dashboardState.addState('faq', null, 'content');
$state.go('dashboard.faq');
}]);예, 가능하지만 캐싱 레이어가 관련되어 있기 때문에 복잡합니다. Alex Feinberg는 자신의 블로그에 솔루션을 문서화했습니다.
기사의 뒷부분에는 stateProvider를 사용하여 상태를 만드는 예가 포함되어 있습니다.
app.stateProvider.state(ent.lob.name.toLowerCase(), {
url: '/' + ent.lob.name.toLowerCase(),
controller: ent.lob.name.toLowerCase() + 'Controller',
templateUrl: 'lobs/views/' + ent.lob.name.toLowerCase() + '.html'
});
ReferenceURL : https://stackoverflow.com/questions/25866387/angularjs-ui-router-programmatically-add-states
'programing' 카테고리의 다른 글
| 동적 ID를 v-for loop + 문자열의 필드와 연결하는 방법은 무엇입니까? (0) | 2022.07.10 |
|---|---|
| wildfly의 힙 메모리를 늘리는 방법 (0) | 2021.01.17 |
| Git에서 브랜치 이름을 어떻게 검색합니까? (0) | 2021.01.17 |
| Android Studio-보안 예외 경고 제거 (0) | 2021.01.17 |
| 서비스에 문서를 삽입하는 방법은 무엇입니까? (0) | 2021.01.17 |