У нас есть страница, которая открывает модальный диалог с формой, как показано ниже. Однако, когда мы нажимаем на контроллер, который должен обрабатывать действие формы, объект формы undefined, и я слишком много новичок 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не undefined вsendInvitationController, но содержит правильные данные, а$scope.invitationFormостается undefined. - внутри send-invite.html мы можем получить доступ к
$scope.invitationForm.$invalidи выполнить проверку:<button type="button" ng-click="sendInvitation()" ng-disabled="invitationForm.$invalid">Invite</button>
Итак, возникает вопрос: почему привязка объекта invitationForm к $scope не выполняется при отправке, когда модель формы привязывается к исходному?
