在组件 angularjs 内单击提交时调用 parent 函数

Question

我有一个模态框，它是一个组件。当我在此模式中填写表格并单击提交时，我想调用 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>

因此，如果我单击 Save，我想调用 parent 控制器中的函数 addTest()。我该怎么做？

Answer 1

您需要像这样与模态共享范围

 .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>

Answer 2

$uibModal.open returns object 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); 
    };
  }
})

在parentcontroller.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

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.

有关详细信息，请参阅

UI-Bootstrap modal API Reference

在组件 angularjs 内单击提交时调用 parent 函数

Call parent function when click submit inside modal which is the component angularjs

angularjs

angular-ui-bootstrap

angular-ui-modal

return