angular-ui-modal과 부트스트랩 $modal을 사용하여 여러 단계 마법사를 만듭니다.
ui-router의 FAQ에는 부트스트랩 $modal과의 통합에 대한 섹션이 있지만 추상 뷰에 대해서는 언급하지 않았습니다.저는 하나의 추상적인 뷰 아래에 3개의 뷰가 있기 때문에 다음과 같습니다.
$stateProvider
.state('setup', {
url: '/setup',
templateUrl: 'initialSetup.html',
controller: 'InitialSetupCtrl',
'abstract': true
})
// markup for the static view is
<div class="wizard">
<div ui-view></div>
</div>
.state('setup.stepOne', {
url: '/stepOne',
controller: 'SetupStepOneCtrl',
onEnter: function($stateParams, $state, $modal) {
$modal.open{
backdrop: 'static',
templateUrl: 'setup.stepOne.html',
controller: 'SetupStepOneCtrl'
})
}
})
.state('setup.stepTwo', {
url: '/stepTwo',
controller: 'SetupStepTwoCtrl',
onEnter: function($stateParams, $state, $modal) {
$modal.open({
backdrop: 'static',
templateUrl: 'setup.stepTwo.html',
controller: 'SetupStepTwoCtrl'
})
}
})
.state('setup.stepThree', {
url: '/stepThree',
templateUrl: 'setup.stepThree.html',
controller: 'SetupStepThreeCtrl'
...
});
}]);
또한 추상 상태에는 onEnter 블록만 추가하려고 하고 3개의 자 상태에서 각각 onEnter를 제거했습니다.사실 이게 올바른 접근법인 것 같아요.추상 스테이트가 초기화되어 $modal이 열리고 후속 스테이트가 에 삽입됩니다만, 이것을 시도했을 때 ui-view컨테이너는 비어 있었습니다.
이 문제를 해결할 다른 뾰족한 방법을 생각할 수 있지만, 이 문제를 해결할 수 있는 표준적인 방법이 있는지 알아보려고 합니다.
또 다른 방법은ng-switch와 함께ng-include내부 조합$modalcontroller를 사용하여 마법사 스텝템플릿을 동적으로 로드합니다.즉, 모든 마법사 스텝에 대해 동일한 컨트롤러를 공유해도 상관없습니다.
<div ng-switch="currentStep.number">
<div ng-switch-when="1">
<ng-include src="'wizardModalStep1.html'"></ng-include>
</div>
<div ng-switch-when="2">
<ng-include src="'wizardModalStep2.html'"></ng-include>
</div>
<div ng-switch-when="3">
<ng-include src="'wizardModalStep3.html'"></ng-include>
</div>
</div>
다음은 Plunker와 작업 예를 제시하겠습니다.http://plnkr.co/edit/Og2U2fZSc3VECtPdnhS1?p=preview
누군가 도움이 되었으면 좋겠어!!
마법사를 개발하기 위해 다음과 같은 방법을 사용했습니다.이게 도움이 될 수도 있어요
아래 샘플과 같은 상태를 부모 자산과 함께 사용했습니다.
var home = {
name: 'home',
url: '/home',
controller: 'MainController',
templateUrl: '/html/main.html'
},
sampleWizard = {
name: 'sampleWizard',
url: '/sampleWizard',
controller: 'sampleWizardController',
templateUrl: '/html/sd/sample/sampleWizard.html'
},
sampleSectionOne = {
name: 'sampleSectionOne',
url: '/sampleSectionOne',
parent: sampleWizard,
controller: 'sampleSectionOneController',
templateUrl: '/html/sd/sample/sampleSectionOne.html'
},
sampleSectionTwo = {
name: 'sampleSectionTwo',
url: '/sampleSectionTwo',
parent: sampleWizard,
controller: 'sampleSectionTwoController',
templateUrl: '/html/sd/sample/sampleSectionTwo.html'
};
$stateProvider.state(home);
$stateProvider.state(sampleWizard);
$stateProvider.state(sampleSectionOne);
$stateProvider.state(sampleSectionTwo);
다음 단계로 넘어갈 때마다 모달(modal)을 발사하고 싶은지 모르겠네요
modal view()를 작성하기만 하면 됩니다.그러면 각 스텝에는 modal templateUrl이 할당됩니다.
각 템플릿은 다음과 같습니다.
<div class="modal fade in" id="whatever" style="display:block">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<a ui-sref="next_page_route_id" type="button" class="btn btn-primary">Next</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal-backdrop fade in"></div>
마지막 화면에서 송신에 data-backs="modal"을 추가할 수 있으며, 이것으로 완료됩니다.
저는 비슷한 시나리오에 대처한 적이 있습니다.마법사(순서를 밟아 최종적으로 요약을 눌러 저장할 수 있습니다)를 작성해야 했습니다.이를 위해 하나의 컨트롤러로 다른 뷰를 작성했습니다.컨트롤러의 스코프는 재루팅 후에 소멸하기 때문에 컨트롤러의 스코프(기본적으로 마법사와 관련된 모델 오브젝트)를 마법사의 각 라우팅에 대해 서비스 오브젝트에 저장하고(Capture through location.path()), 컨트롤러 로드 시 서비스 오브젝트에서 이 오브젝트를 다시 로드해야 했습니다.이하와 같은 것:-
// Saving data on routing
$scope.nextPage = function () {
service.ModelForWizard = $scope.ModelForWizard;
switch ($location.path()) {
case RouteOfPage1:
//Do some stuff
break;
case RouteOfPage2:
//Do some stuff
break;
default:
}
서비스 또는 팩토리는 사용자 세션의 라이프 타임 내내 유지되며 사용자 데이터를 보관하는 데 이상적입니다.한가지 더 도움이 된 것은 노선에서 '해결책'을 사용한 것이다.그러면 필요한 데이터(일반적으로 조회 데이터)가 로드되지 않을 때까지 다음 페이지가 렌더링되지 않습니다.해결 코드는 다음과 같습니다.
.when('/RouteForWizardPage1', {
templateUrl: '/templates/ViewPage1Wizard.html',
caseInsensitiveMatch: true,
controller: 'wizardController',
resolve: {
wizardLookupDataPage1: function (Service) {
return service.getwizardModelLookupDataPage1().$promise;
}
},
})
나도 같은 상황에 부딪혔어나에게 효과가 있었던 것은 첫 번째 서브스테이트의 URL 속성을 비운 것입니다.따라서 첫 번째 서브스테이트에서는 코드는 다음과 같습니다.
.state('setup.stepOne', {
url: '',
controller: 'SetupStepOneCtrl',
onEnter: function($stateParams, $state, $modal) {
$modal.open{
backdrop: 'static',
templateUrl: 'setup.stepOne.html',
controller: 'SetupStepOneCtrl'
})
}
})
또한 url 속성을 사용하여 다른 3개의 서브스테이트를 호출하지 않고 상태 이름만 사용하여 호출하는 경우에는 해당 서브스테이트의 URL 속성을 반드시 언급할 필요는 없습니다.
모달 대화 상자에 마법사를 표시하고 마법사의 각 단계에 대해 별도의 상태를 가지려면 모달 대화 상자가 보기 계층 외부에 완전히 렌더링된다는 점에 유의해야 합니다. 때문에 서로 간에 어떠한 할 수 .ui-router의 뷰 렌더링 메커니즘과 대화상자의 내용.
강력한 솔루션은 마법사 콘텐츠 조작 로직을 부모 상태 범위에 넣는 것입니다.
$scope.wizard = {
scope: $scope.$new(),
show: function (template) {
// open the $modal if not open yet
// purge scope using angular.copy()
// return $scope.wizard.scope
},
// private
open: function () {
$modal.open({
scope: $scope.wizard.scope,
// ...
});
}
};
그런 다음 각 하위 상태의 적절한 콘텐츠를 수동으로 표시하고 필요에 따라 마법사의 범위를 조작합니다.
$scope.wizard.show('someTemplate');
$scope.wizard.scope.user = ...;
이 했을 때, 따로따로 할 몇 가지 했습니다.ui-router를 참조해 주세요.에 의해, 「」, 「」, 「」를할 수 있게 되었습니다.wizard 스코프에서 됩니다(「」와 같은 합니다).ui-router상태 정의)에서 마법사를 진행하고 대화 상자 내에서 적절한 보기/컨트롤러를 렌더링하는 방법을 제공합니다.
멀티스텝 마법사를 작성하려면 https://github.com/troch/angular-multi-step-form 모듈을 사용합니다.
뷰와 같은 단계를 만들 수 있으며 탐색(뒤로/ 앞으로 버튼, URL 검색 매개 변수가 있는 URL)을 활성화할 수 있습니다.예시는 이쪽에서 보실 수 있습니다.
언급URL : https://stackoverflow.com/questions/21367864/use-angular-ui-router-with-bootstrap-modal-to-create-a-multi-step-wizard
'programing' 카테고리의 다른 글
| 어떻게 하면 다른 소품들을 넘겨서 반향을 일으킬 수 있을까요? (0) | 2023.03.04 |
|---|---|
| 제트 교차 원점 필터 (0) | 2023.03.04 |
| Spring Boot 어플리케이션과 H2 파일 데이터베이스 (0) | 2023.03.04 |
| TypeScript를 사용한 react-router- (0) | 2023.03.04 |
| Angular ui-router를 사용하여 상태 변경 없이 URL 쿼리 매개 변수 설정 (0) | 2023.03.04 |