AngularJS模态框关闭或显示时清空输入框内容的实现问题

看起来你已经搞定了手动清空的逻辑，现在就差把这个清空动作和模态框的打开/关闭事件绑定起来啦！我来给你几种常用的解决方案，根据你用的模态框组件来选就行：

如果你用的是AngularUI Bootstrap的模态框 #

这是AngularJS里最常用的模态框组件，它自带了生命周期事件可以绑定：

方法1：在打开模态框时监听事件触发清空 #

在你调用$uibModal.open()的地方，获取模态实例后，监听opened（打开完成）和result（关闭完成）事件：

// 打开模态框的代码
var modalInstance = $uibModal.open({
  templateUrl: '你的模态框模板路径.html',
  controller: '你的模态框控制器名称'
});

// 模态框打开后立即清空表单
modalInstance.opened.then(function() {
  $scope.ClearForm();
});

// 模态框关闭时（不管是确认还是取消）都清空表单
modalInstance.result.then(
  // 点击确认按钮关闭的回调
  function() {
    $scope.ClearForm();
  },
  // 点击取消/空白处关闭的回调
  function() {
    $scope.ClearForm();
  }
);

方法2：在模态框控制器内部初始化时清空 #

如果你的newPlan是定义在模态框自己的控制器里，那直接在控制器初始化时调用清空方法就行，这样每次打开模态框都会自动重置：

angular.module('你的应用模块名').controller('你的模态框控制器', function($scope) {
  // 你的清空方法
  $scope.ClearForm = function() {
    $scope.newPlan = {};
  };

  // 控制器初始化时自动执行清空
  $scope.ClearForm();
});

如果你用的是自定义模态框（自己写的显示/隐藏逻辑） #

那就在控制模态框显示和隐藏的方法里，直接调用ClearForm：

// 打开模态框前先清空
$scope.openModal = function() {
  $scope.ClearForm();
  $scope.isModalVisible = true; // 假设你用这个变量控制模态框显示
};

// 关闭模态框时也清空
$scope.closeModal = function() {
  $scope.ClearForm();
  $scope.isModalVisible = false;
};

为什么手动点击可以，自动不行？ #

因为你手动点击按钮是通过ng-click主动触发了ClearForm，但模态框的打开/关闭动作本身并没有和这个方法绑定，所以只要把清空逻辑挂到对应的事件上，就能实现自动清空啦！

内容的提问来源于stack exchange，提问作者zeeshan