AngularJS中点击复选框如何正确清除重置DatePicker值

实现点击复选框清空Datepicker选中值的功能时，出现作用域内绑定值已经置空，但输入框视图仍然显示旧选中日期的不同步问题。

原有问题代码 #

控制器逻辑 #

$scope.SetFromDate = function (FromDate) {
    if (validateDateFormat(FromDate)) {
        $scope.FromDate = FromDate;
    } 
};

$scope.ChangeDateAll = function () {
    if ($scope.FromDateAll) {
        $scope.FromDate = '';
    } else {
        $scope.FromDate = moment(new Date()).format("DD MMM YYYY");
    }
};

页面模板 #

<input type="checkbox" ng-model="FromDateAll" ng-change="ChangeFromDateAll()" />
<datepicker date-format="dd MMM yyyy">
<input type="text" ng-model="FromDate" ng-enter="SetFromDate(FromDate)" ng-change="SetFromDate(FromDate);" /> 
</datepicker>

出现该问题有两个核心原因：

• 代码存在笔误：复选框ng-change绑定的方法名是ChangeFromDateAll()，但控制器内定义的方法名为ChangeDateAll，方法名不匹配会导致勾选复选框时，写好的清空逻辑根本不会触发。
• 第三方datepicker组件内部维护了独立的选中状态缓存，单纯修改作用域上的FromDate变量，不会触发组件内部状态更新，组件不会重绘输入框视图，最终出现数据和视图不同步的现象。

方案1：修复绑定+触发组件同步（推荐，符合AngularJS规范） #

1. 首先修正方法名不匹配的笔误，把复选框的ng-change值改为ChangeDateAll()
2. 将ng-model绑定直接放到<datepicker>标签上，让组件直接监听作用域值变化，不要只给内部input标签绑定ng-model
3. 清空值时使用null代替空字符串，符合datepicker组件的空值识别规则，必要时手动触发一次脏检查保证视图同步
   修改后的代码如下：

修改后模板 #

<input type="checkbox" ng-model="FromDateAll" ng-change="ChangeDateAll()" />
<datepicker date-format="dd MMM yyyy" ng-model="FromDate">
  <input type="text" ng-enter="SetFromDate(FromDate)" ng-change="SetFromDate(FromDate);" /> 
</datepicker>

修改后控制器逻辑 #

$scope.ChangeDateAll = function () {
    if ($scope.FromDateAll) {
        // 用null作为空值，触发datepicker内部状态重置
        $scope.FromDate = null;
    } else {
        $scope.FromDate = moment(new Date()).format("DD MMM YYYY");
    }
    // 避免非digest周期赋值不更新视图
    if (!$scope.$$phase) {
        $scope.$apply();
    }
};

方案2：调用组件原生API重置（兜底方案） #

如果方案1因为组件版本问题不生效，可以直接获取datepicker实例，调用组件原生的setDate方法强制重置视图：

$scope.ChangeDateAll = function () {
    const dateInput = angular.element('datepicker input');
    if ($scope.FromDateAll) {
        $scope.FromDate = null;
        dateInput.datepicker('setDate', null);
    } else {
        const defaultDate = moment(new Date()).format("DD MMM YYYY");
        $scope.FromDate = defaultDate;
        dateInput.datepicker('setDate', new Date());
    }
};

注意：该方案直接操作DOM，不符合AngularJS的分层设计规范，仅作为组件双向绑定失效时的兜底方案使用。

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