当单击模态内部的提交时调用父函数

Question

I have a modal which is a component. When I fill form in this modal and click submit I would like to invoke function in parent.

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>

So if I click Save I would like to invoke function addTest() which is inside parent controller. How can I do this?

Answer 1

The $uibModal.open returns an object on which the result property contains a promise that is resolved with the result upon closing the modal or rejected with the reason upon cancelling the modal.

In modal.component.js

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

In parent controller.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;
    });
}

From the Docs:

return

The open method returns a modal instance, an object with the following properties:

• close(result) (Type: function) - Can be used to close a modal, passing a result.

• dismiss(reason) (Type: function) - Can be used to dismiss a modal, passing a reason.

• result (Type: promise) - Is resolved when a modal is closed and rejected when a modal is dismissed.

• opened (Type: promise) - Is resolved when a modal gets opened after downloading content's template and resolving all variables.

• closed (Type: promise) - Is resolved when a modal is closed and the animation completes.

• rendered (Type: promise) - Is resolved when a modal is rendered.

For more information, see

• UI-Bootstrap modal API Reference

Answer 2

You need to share the scope with the modal like this

 .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',
            })
          }


    })

Then, in your dialog call it like this

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