50
次のようなフォームでモーダルダイアログを開くページがあります。しかし、フォームアクションを処理するコントローラをヒットすると、フォームオブジェクトは定義されていません。理由はわかりません。AngularJSモーダルダイアログフォームオブジェクトがコントローラで定義されていません
これは親ページコントローラがモーダルダイアログ：このようなページの
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;
}
}
}
);
};
：
<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>
// inside a loop over organisations
<a ng-click="openInvitationDialog({{organisation.id}})">Invite new member</a>
招待ダイアログHTMLは次のようになります
招待を処理するコントローラはどこか別の場所である：
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...
};
}]);
だから、コントローラにフォームの範囲を取得するための正しい方法は何ですか？
多分sendInvitationControllerに$modalを注入してsendInvitation機能を追加する必要がありますか？しかし、私がそうすると、アクションは決してコントローラに入りません。または、コントローラーを参照する代わりに、サブミットアクションを処理する関数を$modal.open({ ...に追加する必要がありますか？私はsendInvitationControllerを独自のファイルとスコープに入れたいと思っていますが、
ありがとうございました！
$scope.invitationオブジェクトがsendInvitationControllerで未定義のではなく、正しいデータを保持している：私たちは、私たちは、回避策を構築し、誰かが質問自体に答えるかもしれない助けたいくつかのことが発見EDIT
$scope.invitationFormは未定義のままです。我々は$scope.invitationForm.$invalidにアクセスし、すぐそこに検証を行うことができ、送信-invitation.html内部- ：
<button type="button" ng-click="sendInvitation()" ng-disabled="invitationForm.$invalid">Invite</button>
そこで質問です：なぜ$scopeからオブジェクトの結合は、フォームながら、提出に失敗しませんモデルは矛盾しません。
私は同様の問題がありました。問題は、このようにモーダルを作成するときに$ modalが2つのスコープを作成することです.1つはモーダルウィンドウ用、もう1つはあなたのものです。あなたのng形式の式にドットを入れてみてください。$ scope.data = {}そしてng-form = "data.invitationForm" – 4vanger
なぜ '$ dialog'を' backdropClick：false、 'と組み合わせて使用しないのですか？ –
あなたの答えをありがとう。 @ 4avanger：2つの異なるスコープがある場合、ドット表記を追加するとなぜ助けになるのですか？私はそれを試みたが、データがinvitationFormの代わりに未定義になった。 @マキシム：私たちは$モーダルを使用しています。 $ダイアログが何であるかわからない、多分同じですか？'backdropCLick：false'とは何ですか？ – Pete