Как закрыть модальный интерфейс angular-ui после нажатия кнопки, но при условии

Я хотел бы закрыть модальное окно после нажатия кнопки сохранения, но только тогда, когда функция, которая также вызывается этой кнопкой, успешно разрешена.

родитель.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
        };
    }
})

добавить-тест-modal.html

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

Возможно ли это таким образом, или, может быть, мне следует разделить область и просто вызвать эту функцию из родительской области, а затем закрыть ее при условии?


angularjs angular-ui-bootstrap angular-ui-modal
person emka26    schedule 06.05.2019    source источник
comment
Контроллеры компонентов работают не так, как модальные контроллеры. Локальный $modalnstance недоступен в контроллерах компонентов. См. пример компонента в Справочнике по API службы UI-Bootstrap $uibModal.   -  person georgeawg    schedule 07.05.2019

Ответы (1)


arrow_upward
0
arrow_downward

Есть два варианта, которые можно придумать, предполагая, что addTest возвращает обещание.

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

.

person Ashish    schedule 06.05.2019
comment
Резольверы - это функции, а не значения. Как написано, ваше решение будет вызывать функцию addTest до создания экземпляра контроллера. Это проблема, если вы хотите вызвать эту функцию с помощью кнопки save. - person georgeawg; 07.05.2019
comment
О, да. Тогда должно быть так resolve: { addTest: function(){ return addTest;} } - person Ashish; 07.05.2019