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

Question

I would like to close modal after click button save, but only when function which is also called by this button is resolved successfully.

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

add-test-modal.html

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

Is it possible this way or maybe I should share scope and just call this function from scope parent and then close under condition?

Answer 1

There are two options can think of assuming addTest returns promise.

1. Move addTest logic to service and call this method from modal controller
2. Pass addTest function as resolve parameter to modal. Please refer https://angular-ui.github.io/bootstrap/#!modal

Parent

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

Modal

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

.