1

我有一个模态，它是一个组件。当我在此模式中填写表格并单击提交时，我想在父级中调用函数。

父控制器.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()父控制器内部的函数。我怎样才能做到这一点？

4

2 回答 2

1

$uibModal.open返回一个对象，该对象的属性result包含一个promise，该promise 在关闭模态时使用结果解析，或者在取消模态时使用原因被拒绝。

在modal.component.js

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

在父 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;
    });
}

从文档：

返回

该open方法返回一个模态实例，一个具有以下属性的对象：

  • close(result) （类型：函数） - 可用于关闭模式，传递结果。

  • dismiss(reason) （类型：函数） - 可用于关闭模式，传递原因。

  • result （类型：promise） - 关闭模式时解决，关闭模式时拒绝。

  • opened （类型：promise） - 在下载内容模板并解析所有变量后打开模式时解析。

  • closed （类型：promise） - 当模式关闭并且动画完成时解决。

  • rendered （类型：promise） - 在呈现模式时解决。

有关详细信息，请参阅

于 2019-05-03T11:50:52.323 回答
0

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

 .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>
于 2019-05-03T11:32:32.883 回答