如何在模态关闭或取消时返回异步($ http)数据

时间:2017-03-15 20:19:57

标签: angularjs angular-ui-bootstrap angular-promise angular-http

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

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

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

2 个答案:

答案 0 :(得分:1)

$modal.open()函数返回一些内容,您正在查找result属性。 Here's文档,请查看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
    }
)

答案 1 :(得分:1)

返回$ 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,当模态关闭时会被销毁。使用模态服务返回的promise来更新正确的$ scope。

  

因为调用promise的.then方法会返回一个新的派生promise,所以很容易创建一个promise链。

     

可以创建任意长度的链,因为可以使用另一个承诺来解决承诺(这将进一步推迟其解决方案),可以暂停/推迟对承诺的解决链中的任何一点。这使得实现强大的API成为可能。

     

— AngularJS $q Service API Reference - Chaining Promises

另见UI Bootstrap Modal DEMO and API Reference