如何Return 异步($http) 模态关闭或取消数据

Question

我在控制器中有一个名为 "Audit"

的打开模式

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

当用户点击评论按钮时，模式打开，用户可以添加评论。在关闭评论模式时，我正在尝试更新 "Audit" 控制器中的模式，但它没有发生

下面的函数在另一个名为 "Comments"

的控制器中

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

我的问题是如何在不重新加载页面的情况下return通过在取消函数上调用端点获得的新数据

Answer 1

$modal.open() 函数 returns 一些东西，而您正在寻找 result 属性。 Here's文档，看看result属性.

result 属性 returns 一个承诺，当模态是 "closed" 或 "dismissed" 时，你可以链接它来做某些事情.

关闭模态时，您有两种选择：

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

您可以使用任何一个，但我建议使用 close() 函数完成 "successful"，使用 dismiss() 完成 "cancelled" 或 "failed"模态操作。通常，模态窗口右上角的 "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
    }
)

Answer 2

Return $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。

Because calling the .then method of a promise returns a new derived promise, it is easily possible to create a chain of promises.

It is possible to create chains of any length and since a promise can be resolved with another promise (which will defer its resolution further), it is possible to pause/defer resolution of the promises at any point in the chain. This makes it possible to implement powerful APIs.

— AngularJS $q Service API Reference - Chaining Promises

另见 UI Bootstrap Modal DEMO and API Reference

如何Return 异步($http) 模态关闭或取消数据

How to Return Asynchronous ($http) Data on Modal Close or Cancel

angularjs

angular-ui-bootstrap

angular-http

angular-promise