以下のようなフォームでモーダル ダイアログを開くページがあります。ただし、フォーム アクションを処理する必要があるコントローラーをヒットすると、フォーム オブジェクトが定義されておらず、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>
招待ダイアログの 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...
};
}]);
では、フォーム スコープをコントローラに取得する正しい方法は何でしょうか?
たぶん、に注入$modalして関数をsendInvitationController追加する必要がありますか？sendInvitationしかし、私がそうすると、アクションはコントローラーに入りません。$modal.open({ ...または、コントローラーを参照する代わりに、送信アクションを処理する関数を追加する必要がありますか? 私はsendInvitationControllerを独自のファイルとスコープに入れたいと思っています。
助けてくれてありがとう！
編集
回避策を構築するのに役立ち、誰かが質問自体に答えるのに役立つ可能性があるいくつかのことを見つけました。
$scope.invitationオブジェクトは未定義ではありませんsendInvitationControllerが、正しいデータを保持していますが、未定義の$scope.invitationFormままです。- send-invitation.html 内で、そこにアクセス
$scope.invitationForm.$invalidして検証を行うことができます。<button type="button" ng-click="sendInvitation()" ng-disabled="invitationForm.$invalid">Invite</button>
問題は、フォームモデルが正しくバインドされているのに、invitationFormオブジェクトのバインドが$scope送信時に失敗するのはなぜですか?