angular 1.5에서 ui.bootstrap.modal과 함께 angular 구성 요소를 사용하는 방법
ui.bootstrap.modal과 angular 컴포넌트를 사용하고 싶습니다.각도 버전은 1.5입니다.
나는 아래와 같이 사용하려고 했다.
요소
function MyComponentController($uibModalInstance){
var ctrl = this;
ctrl.doSomething = function() {
//doSomething
}
}
app.component('myComponent', {
contoller: MyComponentController,
templateUrl: '/path/to/myComponent.html'
}
부모 컨트롤러
function parentController($uibModal){
var ctrl = this;
ctrl.openModal = function(){
var modalInstance = $uibModal.open({
template: '<my-component></my-component>'
}
}
그리고 내가 실행했을 때parentController.openModal()모드창이 열려 있는데 $injector:unpr Unknown Provider 오류가 발생하였습니다.
ui.bootstrap.modal에서 angular 컴포넌트를 사용하는 방법이 있습니까?더 자세한 정보가 필요하시면 알려주세요.
감사해요.
편집
Renato Machado의 ui.bootstrap.modal과 함께 컴포넌트를 사용하는 방법이 있습니다.고마워요 Renato.
하지만 좀 복잡하고 불편하다고 느껴요.마지막으로 모달 내부에 컴포넌트를 사용하는 것이 좋다고 생각합니다.
모달은 통상적인 방법으로 열립니다(컨트롤러와 템플릿을 로 설정합니다).$uibModal.open({})모듈에는 일반적으로 사용하는 로직이 있는 컴포넌트가 포함되어 있습니다.
모달에는 모달 창 닫기처럼 모달과 관련된 단순한 논리만 있어야 합니다.
주로 비즈니스/어플리케이션과 관련된 다른 로직이 컴포넌트에 포함되어 있어야 합니다.
공통화를 쉽게 할 수 있습니다.
편집: UI Bootstrap 2.1.0에서는 부트스트랩 모달의 컴포넌트가 네이티브로 지원되고 있습니다.2.1.0 이후에 몇 가지 모듈 문제를 해결하기 위해 몇 가지 퀵 릴리즈가 있었던 것 같으니 최신 버전을 꼭 입수하겠습니다.
UI 부트스트랩 2.1.0+를 사용하는 버전은 이 Plunk를 참조하십시오.
http://plnkr.co/edit/jy8WHfJLnMMldMQRj1tf?p=preview
angular.module('app', ['ngAnimate', 'ui.bootstrap']);
angular.module('app')
.component('myContent', {
template: 'I am content! <button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open Modal</button>',
controller: function($uibModal) {
$ctrl = this;
$ctrl.dataForModal = {
name: 'NameToEdit',
value: 'ValueToEdit'
}
$ctrl.open = function() {
$uibModal.open({
component: "myModal",
resolve: {
modalData: function() {
return $ctrl.dataForModal;
}
}
}).result.then(function(result) {
console.info("I was closed, so do what I need to do myContent's controller now. Result was->");
console.info(result);
}, function(reason) {
console.info("I was dimissed, so do what I need to do myContent's controller now. Reason was->" + reason);
});
};
}
});
angular.module('app')
.component('myModal', {
template: `<div class="modal-body"><div>{{$ctrl.greeting}}</div>
<label>Name To Edit</label> <input ng-model="$ctrl.modalData.name"><br>
<label>Value To Edit</label> <input ng-model="$ctrl.modalData.value"><br>
<button class="btn btn-warning" type="button" ng-click="$ctrl.handleClose()">Close Modal</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.handleDismiss()">Dimiss Modal</button>
</div>`,
bindings: {
modalInstance: "<",
resolve: "<"
},
controller: [function() {
var $ctrl = this;
$ctrl.$onInit = function() {
$ctrl.modalData = $ctrl.resolve.modalData;
}
$ctrl.handleClose = function() {
console.info("in handle close");
$ctrl.modalInstance.close($ctrl.modalData);
};
$ctrl.handleDismiss = function() {
console.info("in handle dismiss");
$ctrl.modalInstance.dismiss("cancel");
};
}]
});
최초 답변은 다음과 같습니다.
나도 며칠 전에 이걸 알아내려고 했었어.이 투고에 기재되어 있는 정보를 이 링크와 함께 참고하여 이를 실현하기 위한 다른 방법을 생각해 보았습니다.다음은 도움이 되는 참조 링크입니다.
https://github.com/angular-ui/bootstrap/issues/5683
http://www.codelord.net/ (컴포넌트 내의 콜백에 인수를 전달하는 데 도움이 됩니다)
또한 http://plnkr.co/edit/PjQdBUq0akXP2fn5sYZs?p=preview의 Plunk도 있습니다.
나는 몇 가지 데이터를 편집하기 위해 모달(modal)을 사용하는 일반적인 현실 세계의 시나리오를 시연하려고 했다.
angular.module('app', ['ngAnimate', 'ui.bootstrap']);
angular.module('app')
.component('myContent', {
template: 'I am content! <button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open Modal</button>',
controller: function($uibModal) {
$ctrl = this;
$ctrl.dataForModal = {
name: 'NameToEdit',
value: 'ValueToEdit'
}
$ctrl.open = function() {
$uibModal.open({
template: '<my-modal greeting="$ctrl.greeting" modal-data="$ctrl.modalData" $close="$close(result)" $dismiss="$dismiss(reason)"></my-modal>',
controller: ['modalData', function(modalData) {
var $ctrl = this;
$ctrl.greeting = 'I am a modal!'
$ctrl.modalData = modalData;
}],
controllerAs: '$ctrl',
resolve: {
modalData: $ctrl.dataForModal
}
}).result.then(function(result) {
console.info("I was closed, so do what I need to do myContent's controller now and result was->");
console.info(result);
}, function(reason) {
console.info("I was dimissed, so do what I need to do myContent's controller now and reason was->" + reason);
});
};
}
});
angular.module('app')
.component('myModal', {
template: `<div class="modal-body"><div>{{$ctrl.greeting}}</div>
<label>Name To Edit</label> <input ng-model="$ctrl.modalData.name"><br>
<label>Value To Edit</label> <input ng-model="$ctrl.modalData.value"><br>
<button class="btn btn-warning" type="button" ng-click="$ctrl.handleClose()">Close Modal</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.handleDismiss()">Dimiss Modal</button>
</div>`,
bindings: {
$close: '&',
$dismiss: '&',
greeting: '<',
modalData: '<'
},
controller: [function() {
var $ctrl = this;
$ctrl.handleClose = function() {
console.info("in handle close");
$ctrl.$close({
result: $ctrl.modalData
});
};
$ctrl.handleDismiss = function() {
console.info("in handle dismiss");
$ctrl.$dismiss({
reason: 'cancel'
});
};
}],
});
부모 컨트롤러를 전달함으로써 더 복잡해질 필요는 없습니다.모달 표시의 .component 내에서 액세스 할 수 있습니다.
요소
/**
* @ngdoc component
* @name fsad.component:video
*
* @description <fsad-video> component, in development...
*
*/
(function () {
'use strict';
angular.module('fsad').component('fsadVideo', {
bindings: {},
templateUrl: function(appConstant){return appConstant.paths.modules.fsad + 'leefloon/fsad-video.html'},
controller: controller
});
controller.$inject = ['$scope'];
function controller($scope){
var $ctrl = this;
setDataModel();
/****************************************************************/
$ctrl.ui.close = close;
/****************************************************************/
function setDataModel(){
$ctrl.ui = {};
}
function close(){
$scope.$parent.$close();
}
}
}());
모달 열기
var modalInstance = $uibModal.open({
backdrop: 'static',
keyboard: true,
backdropClick: false,
template: '<fsad-video></fsad-video>',
windowClass: 'edit-contactenblad',
});
템플릿이 컴포넌트이므로 $scope.$parent는 항상 모달인스턴스를 가리킵니다$close() 함수에 액세스할 수 있습니다.
데이터 송수신
데이터를 구성 요소에 전달하거나 구성 요소에서 데이터를 다시 받아야 하는 경우 다음과 같이 수행할 수 있습니다.
var modalInstance = $uibModal.open({
backdrop: 'static',
keyboard: true,
backdropClick: false,
template: '<fsad-video method="$ctrl.method" on-viewed="$ctrl.userHasViewedVideo(time)"></fsad-ideo>',
controller: function(){
this.method = method;
this.userHasViewedVideo = function(time){}
},
controllerAs: '$ctrl',
windowClass: 'edit-medewerker',
});
참고로 이 구조 스타일 가이드를 사용하여 컴포넌트를 만듭니다.
$uibModal에 $close() ★★★★★★★★★★★★★★★★★」$dismiss()함수는 컴포넌트 내의 일부 상위 데이터 및 함수 바인딩과 함께 다음과 같이 모두 전달할 수 있습니다.
오픈 모달 로직
$uibModal.open({
template: '<login close="$close()" dismiss="$dismiss()" ' +
'email="$ctrl.cookieEmail" check-login="$ctrl.ajaxLogin(user, pass)"></login>',
controller: function () {
this.cookieEmail = $cookies.get('savedEmail');
this.ajaxLogin = AjaxLoginService.login;
},
controllerAs: '$ctrl'
});
모달 로그인 컴포넌트
{
templateUrl: 'view/login.html',
bindings: {
email: '<',
checkLogin: '&',
close: '&',
dismiss: '&'
},
controller: function () {
var viewModel = this;
viewModel.password = '';
viewModel.submit = function () {
viewModel.checkLogin(
{ user: viewModel.email, pass: viewModel.password }
).then(function (success) {
viewModel.close();
});
}
}
}
모달 HTML
<form ng-submit="$ctrl.submit()">
<input type="text" ng-model="$ctrl.email" />
<input type="password" ng-model="$ctrl.password" />
<button type="button" ng-click="$ctrl.dismiss()">Cancel</button>
<button type="submit">Login</button>
</form>
AngularJS.5 하지만 AngularJS 1.5의 .&함수 래퍼로서의 바인딩:https://docs.angularjs.org/guide/component
부모 컨트롤러를 모달인스턴스가 있는 모달컴포넌트에 전달해야 합니다.그러기 위해서는 모달의 생성 HTML을 부모 컴포넌트에 추가해야 합니다.
부모 성분
$ctrl.openModal = function(){
$ctrl.modalInstance = $uibModal.open({
template: '<your-modal></your-modal>',
appendTo : $document.find('parentComponent')
});
}
모달 성분
.component('yourModal', {
templateUrl: 'path/to/modal.html',
replace: true,
require: {
parent : '^parentComponent'
},
controller: ModalCtrl
});
function ModalCtrl() {
var $ctrl = this;
$ctrl.$onInit = function(){
var instance = $ctrl.parent.modalInstance;
$ctrl.items = ['item1', 'item2', 'item3'];
$ctrl.selected = {
item: $ctrl.items[0]
};
$ctrl.ok = function () {
instance.close($ctrl.selected);
};
$ctrl.cancel = function () {
instance.dismiss('cancel');
};
instance.result.then(function (selectedItem) {
$ctrl.selected = selectedItem;
}, function () {
console.log('Modal dismissed at: ' + new Date());
});
};
}
필요한 컨트롤러는 $onInit 이후에만 사용할 수 있으므로 주의하십시오.
언급URL : https://stackoverflow.com/questions/36401375/how-to-use-angular-component-with-ui-bootstrap-modal-in-angular-1-5
'IT' 카테고리의 다른 글
| "Unknown provider: aProvider <-a" 원래 프로바이더를 찾으려면 어떻게 해야 하나요? (0) | 2023.02.10 |
|---|---|
| WordPress 테마에서 jQuery를 $로 재매핑한 후 js 파일 외부에서 함수를 트리거할 수 없습니다. (0) | 2023.02.10 |
| 루프에서 약속으로 변수 전달 (0) | 2023.02.10 |
| MVC 웹 API:요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다. (0) | 2023.02.10 |
| WordPress 템플릿에서 현재 페이지가 WooCommerce 카트인지 체크아웃 페이지인지 어떻게 알 수 있습니까? (0) | 2023.02.10 |