从更改事件更改复选框状态

Question

选中我的复选框后，会打开一个对话框，当我单击取消时，应该取消选中该复选框。

我做不到。

如果在对话框中选择“否”（请参阅 if 语句），则应将复选框设置为之前的状态。

但是，似乎为复选框设置模型，$scope.canSupportAccess，对该函数内部的复选框的检查没有影响。

我已经测试了 $scope.canSupportAccess 是否能够更新复选框，通过使用 true 和 false 初始化它，并且可以看到它确实检查或取消选中复选框。

我注意到我必须将 canSupportAccess 作为参数传递给函数，因为 $scope.canSupportAccess 不会在 updateSupportAccess() 内部更新，即使 $scope.canSupportAccess 是模型并且updateSupportAccess() 复选框更改时触发。

为什么 $scope.canSupportAccess 在函数内部没有效果，如何更新 updateSupportAccess() 函数内部的复选框？

这是设计使然，以避免永远递归调用 updateSupportAccess() 吗？如果是这样，解决方法是什么？

这是我的代码：

export default function (app) {
    app.controller('userDetailCtrl', [
        'shell',
        '$scope',
        function (shell, $scope) {
            $scope.canSupportAccess = false;
            $scope.updateSupportAccess = function (canSupportAccess) {
                if (canSupportAccess) {
                    shell.confirmBox('Allow Access',
                        'Allow access?',
                        'YesNo', true)
                        .result
                        .then(function (result) {
                            if (result === "yes") {
                                $scope.canSupportAccess = true;

                            } else {
                                $scope.canSupportAccess = false;
                            }
                        });
                } else {
                    shell.confirmBox('Remove Access',
                        'Revoke access?',
                        'YesNo')
                        .result
                        .then(function (result) {
                            if (result === "yes") {
                                $scope.canSupportAccess = false;
                            } else {
                                $scope.canSupportAccess = true;
                            }
                        });
                }
            }
        }]
    );
}

和 HTML:

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

Answer 1

这是由位于不同范围内的两个不同 canSupportAccess 属性引起的，这是 AngularJS 中一个非常普遍的问题。尝试让你的属性至少与 $scope 分开一层而不是直接连接（例如 $scope.access = { canSupport: false }）。继 "controller as" syntax best practice reliably avoids this issue, and for an example of this convention in action where you can play with it, see StackBlitz's AngularJS demo templates.

在 AngularJS 中查看这个关于原型继承主题的流行 SO 答案以进行深入研究：

从更改事件更改复选框状态

Change checkbox state from change event

html

javascript

checkbox

angularjs