컨트롤러에서 AngularJS 모달 대화 상자 양식 개체가 정의되지 않았습니다.
아래와 같은 형태로 모달 대화상자를 여는 페이지가 있습니다.하지만 폼 액션을 처리해야 하는 컨트롤러를 누르면 폼 오브젝트가 정의되지 않고 Angular 초보자라서...
이것은 모달 대화상자를 여는 기능을 유지하는 상위 페이지 컨트롤러입니다.
app.controller('organisationStructureController', ['$scope', ..., '$modal', function ($scope, ..., $modal) {
$scope.openInvitationDialog = function (targetOrganisationId) {
$modal.open({
templateUrl: 'send-invitation.html',
controller: 'sendInvitationController',
resolve: {$targetOrganisationId: function () {
return targetOrganisationId;
}
}
}
);
};
다음과 같은 페이지에 표시됩니다.
// inside a loop over organisations
<a ng-click="openInvitationDialog({{organisation.id}})">Invite new member</a>
invitation-dialog html은 다음과 같습니다.
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<!-- ... -->
</div>
<div class="modal-body">
<form name="invitationForm">
<div class="form-group">
<label for="email" style="color:white;">Email</label>
<input type="email" class="form-control" autocomplete="off" placeholder="New member email" id="email" name="email" ng-model="invitation.email" required="true"/>
<span class="error animated fadeIn" ng-show="invitationForm.email.$dirty && invitationForm.email.$error.required">Please enter an email address!</span>
<span class="error animated fadeIn" ng-show="invitationForm.email.$error.email">Invalid email</span>
</div>
<!-- ... -->
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button>
<button type="submit" class="btn btn-primary" ng-click="sendInvitation()">Invite</button>
</div>
</form>
</div>
</div>
</div>
초대를 처리하는 컨트롤러는 다른 곳에 있습니다.
app.controller('sendInvitationController', ['$targetOrganisationId', '$scope', ...,
function ($targetOrganisationId, $scope, ...) {
$scope.invitation = {
// ...
targetOrganisation: {
id: $targetOrganisationId
}
};
$scope.sendInvitation = function () {
// $scope.invitationForm is undefined
if ($scope.invitationForm.$invalid) {
return false;
}
// send the invitation...
};
}]);
그렇다면 폼 스코프를 컨트롤러에 삽입하는 올바른 방법은 무엇일까요?
는 '아예'를 해야 할 것 같다.$modalsendInvitationController 해서 ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ를 요.sendInvitation능할할 수??? 이 .이 조작은 컨트롤러에 들어가지 않습니다. 송신 을 「」에 ?$modal.open({ ...트롤롤 ?? ?? ?? ???send Invitation Controller send send send send 。
도와주셔서 감사합니다!
편집
회피책을 구축하는 데 도움이 되는 몇 가지 사항을 발견했으며, 다른 사용자가 질문에 답하는 데 도움이 될 수 있습니다.
$scope.invitation되어 있지 .sendInvitationController반면 """는 ""를 의미합니다.$scope.invitationForm정의되지 않은 채로 있습니다.- 할 수 .
$scope.invitationForm.$invalid해 .<button type="button" ng-click="sendInvitation()" ng-disabled="invitationForm.$invalid">Invite</button>
왜의이 '''의 바인딩''이 것입니다.invitationForm$scope폼 모델이 올바르게 바인딩되는 동안 전송에 실패합니까?
저도 같은 문제가 있어서 모달스 컨트롤러의 범위에서 폼 오브젝트를 정의함으로써 해결할 수 있었습니다., 「 」, 「 」와 같이 .$scope.form = {};를 「Form Tag」로 변경합니다.<form name="form.invitation"> 후 ★★★$scope.form.invitation.$invalid채워야 합니다.
2014년 11월 업데이트: angular-ui-bootstrap부터 시작0.12.0트랜스클루전 범위가 컨트롤러 범위와 병합됩니다.아무것도 할 필요가 없다.
0.12.0 이전 버전:
「 」라고 하는 은, 「 」가 된다.invitationForm부모 컨트롤러 스코프에서 직접 트랜스코프된 스코프를 다음과 같이 바이패스해야 합니다.
<form name="$parent.invitationForm">
위는 부모 컨트롤러에 자동으로 양식 개체를 만듭니다.사전 초기화, 긴 객체 경로 또는 이벤트 전달이 필요하지 않습니다.액세스만 하면 됩니다.$scope.invitationForm모달의 오픈이 완료됩니다.
"왜?"라는 질문에 대한 답은 "범위 지정"입니다. tl;dr 컨트롤러에서 스코프의 폼 개체를 숨긴 모달 대화 상자에서 새 범위를 만들었습니다.
코드를 단순화하면 대략 다음과 같은 결과를 얻을 수 있습니다.
<div ng-ctrl="organizeCtrl">
<modal-dialog>
<form name="invitationForm">
<input type="email" ng-model="invitation.email" placeholder="Enter email..." />
<input type="submit" ng-click="sendInvitation()" text="Invite!" />
<input type="button" ng-click="cancel()" text="Cancel :(" />
</form>
</modal-dialog>
</div>
(이것은 매우 간단한 버전으로, 모든 핵심 컴포넌트가 포함되어 있을 것입니다).이제 스코프가 생성되는 위치와 스코프에 주입되는 내용을 살펴보겠습니다.
<div ng-ctrl="sendInvitationController">
<!-- scope created above with "invitation" and "sendInvitation" from sendInvitationController -->
<modal-dialog>
<!-- scope created above for the modal dialog transclude -->
<form name="invitationForm">
<!-- add "invitationForm" to the modal dialog's scope -->
<input type="email" ng-model="invitation.email" placeholder="Enter email..." />
<input type="submit" ng-click="sendInvitation()" text="Invite!" />
<input type="button" ng-click="cancel()" text="Cancel :(" />
</form>
</modal-dialog>
</div>
여기에서는, 새로운 자 스코프가 작성되고 있는 것을 확인할 수 있습니다.<modal-dialog>여기서부터가 중요한 부분입니다.invitationForm오브젝트는 실제로 추가됩니다.그 때문에, 그 물체는 보이지 않습니다.sendInvitationController이 버튼을 누르면 볼 수 있습니다.ng-disabled. 외부 폼구조에 액세스할 수 있는 경우<modal-dialog>요소(예:sendInvitationController) 함수 호출로 전달해야 합니다.
<div ng-ctrl="organizeCtrl">
<modal-dialog>
<form name="invitationForm">
<input type="email" ng-model="invitation.email" placeholder="Enter email..." />
<input type="submit" ng-click="sendInvitation(invitationForm)" text="Invite!" />
<input type="button" ng-click="cancel()" text="Cancel :(" />
</form>
</modal-dialog>
</div>
컨트롤러가 초대장 폼을 파라미터로 받아들인다.sendInvitation기능:
app.controller('sendInvitationController', ['$targetOrganisationId', '$scope', ...,
function ($targetOrganisationId, $scope, ...) {
$scope.invitation = {
targetOrganisation: {
id: $targetOrganisationId
}
};
$scope.sendInvitation = function (form) {
if (form.$invalid) {
return false;
}
// send the invitation...
};
}]);
@Robin은 다른 솔루션, 특히 의 범위에 뿌리를 둔 오브젝트를 작성하기 위해sendInvitationController그런 다음 Angular의 스코프 트래버설 메커니즘에 의존하여 폼을 해당 오브젝트에 직접 부착합니다.form외부 범위에 대해 이의를 제기하다<modal-dialog>거기에 폼 오브젝트를 붙입니다.를 지정하지 않은 경우,$scope.form = {} sendInvitationController는 Angular를 위해 했을 것입니다.form의 <modal-dialog>할 수 .sendInvitationController.
이를 통해 귀하 또는 다른 사람들이 각도 범위 지정에 대해 배울 수 있기를 바랍니다.
내 일은 이렇게 하는 거야
$modal.open({
templateUrl: 'send-invitation.html',
controller: 'sendInvitationController',
scope: $scope // <-- I added this
}
없음, 형식명 없음, , 형식명 없음$parent을 앵귤러UI 0.12.1.
나는 이것에 의해 이 해결책에 대한 힌트를 얻었다.
$mdDialog.show({
locals: {alert:"display meassage"},
controller: DialogController,
templateUrl: 'views/dialog.html',
parent: angular.element(document.body),
clickOutsideToClose:true,
backdrop: true,
keyboard: true,
backdropClick: true,
})
언급URL : https://stackoverflow.com/questions/19312936/angularjs-modal-dialog-form-object-is-undefined-in-controller
'source' 카테고리의 다른 글
| 스프링 부트 2.1.0, 플라이웨이 4.2.0 (0) | 2023.04.02 |
|---|---|
| 2개의 데이터 소스를 Flyway와 연계하여 스프링 부트에서 HikariCP를 사용하는 방법 (0) | 2023.04.02 |
| BigQuery 테이블의 스키마를 JSON으로 내보낼 수 있는 방법이 있습니까? (0) | 2023.04.02 |
| Node.js에서 발신된 모든 이벤트 듣기 (0) | 2023.04.02 |
| PHP가 JSON을 JQUERY AJAX 호출로 반환 (0) | 2023.03.28 |