Вызовите родительскую функцию, когда нажмите кнопку Отправить внутри модальной, которая является компонентом angularjs - PullRequest
Новая
       10

Вызовите родительскую функцию, когда нажмите кнопку Отправить внутри модальной, которая является компонентом angularjs

0 голосов
/ 03 мая 2019

У меня есть модал, который является компонентом.Когда я заполняю форму в этом режиме и нажимаю «Отправить», я хотел бы вызвать функцию в родительском.

parent controller.js 

    .module('app.test')
    .controller('TestController', function ($uibModal) {
        let vm = this
        vm.addTest = addTest
        vm.openAddTestModal = openAddTestModal


        function openAddTestModal() {
            $uibModal.open({
              component: 'AddTestModalComponent',
              windowClass: 'test-modal',
            })
          }

        function addTest(test) {
          //do something
        }
    })

modal.component.js 

  templateUrl: 'app/modals/add-test-modal.html',
  controllerAs: 'vm',
  controller: function () {
    this.testToSave = ['']
  }
})

modal.component.html 

<div class="modal-header">
  <h2 class="modal-title">Add test</h2>
</div>
<div class="modal-body">
  <div>
    <form>
      <label class="control-label">Test</label>
      <input class="form-control" name="" type="text" required="true" ng-model=""/>
    </div>
    <div class="add-new"><a href="" ng-click="">+ Add test</a></div>
  </div>
  <div class="mt-4 d-flex justify-content-end">
    <button class="btn btn-primary btn-blue" type="submit" ng-click="vm.addTest(vm.test)">Save</button>
  </div>
</div>

Так что если янажмите Save Я хотел бы вызвать функцию addTest(), которая находится внутри родительского контроллера.Как я могу это сделать?

Ответы [ 2 ]

1 голос
/ 03 мая 2019

$uibModal.open возвращает объект, для которого свойство result содержит обещание, которое разрешается с результатом при закрытии модального периода или отклоняется по причине отмены модального.

В modal.component.js 

  templateUrl: 'app/modals/add-test-modal.html',
  controllerAs: 'vm',
  controller: function ($modalInstance) {
    this.testToSave = [''];
    this.addTest = function (result) {
        $modalInstance.close(result); 
    };
  }
})

В родительский контроллер.js 

function openAddTestModal() {
    $uibModal.open({
      component: 'AddTestModalComponent',
      windowClass: 'test-modal',
    }).result.then(function(result) {
      console.log(result);
      vm.addTest(result);
    }).catch(function(reason) {
      console.log(reason);
      throw reason;
    });
}

Из документов:

return

Метод open возвращает модальный экземпляр, объект со следующими свойствами:

  • close(result) (Тип: функция) - Может использоваться для закрытия модального режима, передавая результат.

  • dismiss(reason) (Тип: функция) - Может использоваться для отклонения модального режима, передаваяпричина.

  • result (Тип: обещание) - Разрешается, когда модальное окно закрывается, и отклоняется при отклонении модального.

  • opened (Тип: обещание) - Разрешается, когда модальное окно открывается после загрузки шаблона содержимого и разрешения всех переменных.

  • closed (Тип: обещание) - Разрешается, когда модальное окно закрывается и анимация завершается.

  • rendered (Тип: обещание) - разрешается при визуализации модала.

Для получения дополнительной информации см.

0 голосов
/ 03 мая 2019

Вы должны поделиться областью действия с модальной, как это 

 .module('app.test')
    .controller('TestController', function ($uibModal, $scope) {
        let vm = this
        vm.addTest = addTest
        vm.openAddTestModal = openAddTestModal

        $scope.addTest = function(test) {
          //do something
        }

        function openAddTestModal() {
            $uibModal.open({
              component: 'AddTestModalComponent',
              scope: $scope,
              windowClass: 'test-modal',
            })
          }


    })

Затем, в вашем диалоге, вызовите это так: 

<button class="btn btn-primary btn-blue" type="submit" ng-click="addTest(vm.test)">Save</button>
...