AngularJS中ng-change内修改checkbox绑定的$scope变量不生效如何解决？

• 核心原因是 shell.confirmBox 的 Promise 回调执行在 AngularJS 的上下文之外，你修改了 $scope.canSupportAccess 之后，Angular 没有触发脏检查机制，所以视图上的 checkbox 状态不会同步更新，并不是为了避免递归的刻意设计。
• 另外你当前用 ng-change 触发逻辑的时机是在 ng-model 已经更新之后，所以即使改回去也会出现瞬间状态跳变的闪烁问题。

方案1：手动触发脏检查（快速修复现有代码） #

在 Promise 回调的赋值逻辑外包裹 $scope.$evalAsync()，安全触发 Angular 的脏检查同步视图：

// 仅展示修改后的回调部分，两处回调都做相同修改即可
.then(function (result) {
    $scope.$evalAsync(function() {
        if (result === "yes") {
            $scope.canSupportAccess = true;
        } else {
            $scope.canSupportAccess = false;
        }
    });
});

方案2：优化交互逻辑（无状态闪烁的更优方案） #

替换 ng-change 为 ng-click 拦截点击事件，先弹框确认再修改模型值，避免状态跳变：

HTML 修改为： #

<input type="checkbox"
       id="supportAccess"
       ng-click="updateSupportAccess($event)"
       ng-model="canSupportAccess" />
<label for="supportAccess">
    Allow access.
</label>

JS 函数修改为： #

$scope.updateSupportAccess = function (e) {
    // 阻止默认的checkbox状态变更行为
    e.preventDefault();
    const targetStatus = !$scope.canSupportAccess;
    if (targetStatus) {
        shell.confirmBox('Allow Access',
            'Allow access?',
            'YesNo', true)
            .result
            .then(function (result) {
                $scope.$evalAsync(() => {
                    $scope.canSupportAccess = result === "yes";
                });
            });
    } else {
        shell.confirmBox('Remove Access',
            'Revoke access?',
            'YesNo')
            .result
            .then(function (result) {
                $scope.$evalAsync(() => {
                    $scope.canSupportAccess = result === "yes" ? false : true;
                });
            });
    }
}

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