angularjs - 单击按钮后如何关闭angular-ui模态但在条件下

Question

我想在单击按钮保存后关闭模式，但前提是该按钮也调用的函数成功解析。

父控制器.js

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


    function openAddTestModal() {
        var modalInstance = $uibModal.open({
          component: 'AddTestModalComponent',
          windowClass: 'test-modal',
        })
        modalInstance.result.then(function (result) {
            vm.addTest(result);
        });
    }

    function addTest(test) {
        //do something
        if (testCondition) {
            // do something 
               // success - close modal
         } else {
            // error - don't close modal
        }
    }
})

modal.component.js

.component('AddTestModalComponent', {
    templateUrl: 'app/modals/add-test-modal.html',
    controllerAs: 'vm',
    controller: function ($modalInstance) {
        this.testToSave = [''];
        this.save = function (result) {
            $modalInstance.close(result); 
    //close only function called in parent resolve success
        };
    }
})

添加-测试-modal.html

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

是否有可能，或者我应该共享范围并从范围父级调用此函数，然后在条件下关闭？

Answer 1

假设 addTest 返回 promise，有两个选项可以考虑。

1. 将 addTest 逻辑移至服务并从模态控制器调用此方法
2. 将 addTest 函数作为解析参数传递给模态。请参考https://angular-ui.github.io/bootstrap/#!modal

家长

function openAddTestModal() {
    var modalInstance = $uibModal.open({
        component: 'AddTestModalComponent',
        windowClass: 'test-modal',
        resolve: {
            addTest: addTest
        }
    })
    modalInstance.result.then(function (result) {
        vm.addTest(result);
    });
}

模态

controller: function ($modalInstance, addTest) {
    this.testToSave = [''];
    this.save = function (result) {
        addTest().then(function(){
            $modalInstance.close(result);
        })
    };
}

.