Question

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

父controller.js

import { TranslateService } from '@ngx-translate/core';

yourTranslatedText : string;
yourTranslatedObservableText : string;

constructor(
  private translateService: TranslateService,
) {
   yourTranslatedText = this.translateService.instant('your.key.string'); 
   this.translateService.get('your.key.string').subscribe((translatedString) => {
      yourTranslatedObservableText = translatedString;
   });
}

modal.component.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.html

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

因此，如果我单击<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。我该怎么办？

Answer 1

$uibModal.open返回一个对象，该对象的result属性包含一个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）-渲染模态时解决。

有关更多信息，请参见

UI-Bootstrap modal API Reference

Answer 2

您需要像这样与模式共享作用域

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

在模态内部单击提交时调用父函数，模态是组件angularjs

2 个答案:

返回