Как вернуть асинхронные ($http) данные при закрытии или отмене модального окна

У меня есть открытый мод в контроллере под названием «Аудит».

 $scope.comment = function (spec){
         ManualService.setManual(spec);
            var modalInstance = $modal.open({
                templateUrl: 'views/comment.html',
                controller: 'CommentCtrl',
                size: 'lg'
            });
     }

Когда пользователи нажимают кнопку комментария, открывается модальное окно, и пользователь может добавлять комментарии. При закрытии модального комментария я пытаюсь обновить модальный в контроллере «Аудит», но этого не происходит.

Ниже функция находится в другом контроллере под названием «Комментарии».

$scope.cancel = function () {

        $http.post('/api/v1/manual/manual',$scope.id).success (function (data) {
            $scope.manual = data;
            ManualService.setManual($scope.manual);
        }).error(function (data, status) {
            console.log('Error ' + data);
        });


        $modalInstance.dismiss('cancel');
    }; 

Мой вопрос: как мне вернуть новые данные, которые я получил от вызова конечной точки при функции отмены без перезагрузки страницы


person je2tdam    schedule 15.03.2017    source источник


Ответы (2)


Верните обещание, возвращенное службой $http:

$scope.cancel = function () {

    var promise = $http.post('/api/v1/manual/manual',$scope.id)
      .then (function (response) {
        var manual = response.data;
        return manual;
    });

    $modalInstance.dismiss(promise);
};

Затем цепочка из результата:

$modal.open({}).result.then(
    function onClose(value) {
        // Use the value you passed from the $modalInstance.close() call
    },
    function onCancel(manual) {
        ManualService.setManual(manual);
        $scope.manual = manual;
    }
)

Служба $modal создает $scope, который уничтожается при закрытии модального окна. Используйте обещание, возвращенное модальной службой, для обновления правильной $scope.

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

Можно создавать цепочки любой длины, а поскольку обещание может быть разрешено с помощью другого обещания (что еще больше отсрочит его разрешение), можно приостановить/отложить разрешение обещаний в любой момент цепь. Это позволяет реализовать мощные API.

— Справочник по API службы AngularJS $q — связывание промисов

См. также Демонстрационный пример модального интерфейса Bootstrap и справочник по API

person georgeawg    schedule 15.03.2017

Функция $modal.open() возвращает несколько вещей, и вы ищете свойство result. Вот документация, взгляните на свойство result.

Свойство result возвращает обещание, которое вы можете использовать для выполнения определенных действий, когда модальное окно либо «закрыто», либо «закрыто».

При закрытии модального окна у вас есть два варианта:

  • $modalInstance.close(value)
  • $modalInstance.dismiss(value)

Вы можете использовать любой из них, но я бы предложил использовать функцию close() для "успешного" завершения и dismiss() для "отмененных" или "неудачных" модальных операций. Обычно кнопка «x» в правом верхнем углу модального окна вызывает функцию dismiss(), поэтому вы можете обрабатывать увольнение отдельно от завершения.

Итак, у вас получится что-то вроде этого:

$modal.open({}).result.then(
    function (value) {
        // Use the value you passed from the $modalInstance.close() call
    },
    function (dismissed) {
        // Use the value you passed from the $modalInstance.dismiss() call
    }
)
person robert.bo.roth    schedule 15.03.2017