Объект формы AngularJS модального диалога undefined в контроллере

Ответ 1

У меня была такая же проблема, и я смог ее решить, определив объект формы в области контроллера модалов. Чтобы заставить работать ваш код, например, $scope.form = {}; в начале вашего контроллера и измените свой тег формы на <form name="form.invitation">. Затем $scope.form.invitation.$invalid должен быть заполнен.

Ответ 2

Обновление Nov 2014: начиная с angular -ui-bootstrap 0.12.0 область перехвата объединяется с областью контроллера. Нет необходимости ничего делать.

До 0.12.0:

Чтобы разместить invitationForm непосредственно в области вашего родительского контроллера, вам необходимо обойти запретную область действия следующим образом:

<form name="$parent.invitationForm">

Выше автоматическое создание объекта формы в вашем родительском контроллере. Нет необходимости в материалах предварительной инициализации, длинных объектных дорогах или передаче события. Просто войдите в него с помощью $scope.invitationForm после открытия модального мода.

Ответ 3

Ответ на вопрос "Почему?" является "областью определения". 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 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.

Надеюсь, это поможет вам или другим людям узнать о области Angular.

Ответ 4

Я получил свою работу следующим образом:

$modal.open({
  templateUrl: 'send-invitation.html',
  controller: 'sendInvitationController',
  scope: $scope // <-- I added this
}

Нет имени формы, нет $parent. Я использую версию AnglerUI Bootstrap версии 0.12.1.

Я был перенаправлен на это решение this.

Ответ 5

$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,

            })