Angular UI Modal After Close Event

Angular UI Modal 是一个常用的前端库，用于创建响应式、易于定制的模态框。当模态框关闭时，我们可能需要执行其他操作，比如更新页面数据或者调用其它函数。本文将介绍 Angular UI Modal 的关闭事件以及如何在关闭后执行特定操作。

Angular UI Modal 简介

Angular UI Modal 是一个基于 AngularJS 的弹窗组件库。它可以轻松地创建、自定义和管理各种类型的模态框。通过 Angular UI Modal，我们可以实现：

• 显示具有各种样式和内容的弹窗。
• 传递参数到弹窗以显示不同的内容。
• 在弹窗中嵌入表单、图表、图片等元素。
• 控制弹窗的动画效果、大小和位置。
• 响应用户对弹窗的行为，如点击按钮、拖动等。
• 执行弹窗关闭后的操作。

Angular UI Modal 可以与 AngularJS 框架无缝集成，并支持 Bootstrap 样式。

Angular UI Modal 关闭事件

在使用 Angular UI Modal 时，我们经常需要知道模态框关闭的状态，以便执行相关的操作。Angular UI Modal 提供了两个关闭事件：$close 和 $dismiss。

$close 事件

$close 事件在模态框成功关闭时触发。它接收一个可选参数，用于向父控制器传递数据。这个参数可以是任何值，比如表单数据、文本、数字等。在父控制器中，我们可以使用 $uibModalInstance.close() 方法来关闭模态框并获取传递的参数。

下面是一个示例代码，演示了如何在 Angular UI Modal 中使用 $close 事件：

angular.module('app', ['ui.bootstrap'])
.controller('ModalController', function($scope, $uibModalInstance) {
  $scope.ok = function () {
    // 传递数据给父控制器
    $uibModalInstance.close($scope.formData);
  };
})

$dismiss 事件

$dismiss 事件在模态框关闭失败时触发。它接收一个可选参数，用于向父控制器传递错误信息或原因。在父控制器中，我们可以使用 $uibModalInstance.dismiss() 方法来关闭模态框并获取传递的参数。

下面是一个示例代码，演示了如何在 Angular UI Modal 中使用 $dismiss 事件：

angular.module('app', ['ui.bootstrap'])
.controller('ModalController', function($scope, $uibModalInstance) {
  $scope.cancel = function () {
    // 传递错误信息给父控制器
    $uibModalInstance.dismiss('cancel');
  };
})

弹窗关闭后执行操作

当模态框关闭时，我们可能需要执行特定的操作，比如更新列表、刷新页面等。在实现这些操作之前，我们需要先了解两个重要的 AngularJS 服务：$uibModalInstance 和 $scope。

• $uibModalInstance 服务用于管理模态框的状态和数据，包括打开、关闭、传递参数等。
• $scope 服务用于与视图进行双向数据绑定，控制模态框中的组件和元素。

在 AngularJS 中，我们可以使用 $scope.$on() 方法监听事件并执行指定的函数。因此，我们可以在父控制器中使用 $scope.$on('modal.closing') 监听模态框关闭事件，并在事件触发后执行特定操作。

下面是一个示例代码，演示了如何在模态框关闭后执行特定操作：

angular.module('app', ['ui.bootstrap'])
.controller('ModalController', function($scope, $uibModalInstance) {
  $scope.ok = function () {
    // 传递数据给父控制器
    $uibModalInstance.close($scope.formData

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/26537) ，转载请注明来源
[https://www.javascriptcn.com/post/26537](https://www.javascriptcn.com/post/26537)