從更改事件更改復選框狀態

Question

當我的復選框被選中時，會打開一個對話框，當我點擊取消時，復選框應該被取消選中。

我不能讓這發生。

如果在對話框中選擇了“否”，則復選框應設置為其以前的狀態（請參閱if語句）。

但是，似乎為復選框設置模型$scope.canSupportAccess對檢查此函數內的復選框沒有影響。

我已經測試了$scope.canSupportAccess是否能夠通過用true和false初始化它來更新復選框，並且可以看到它確實選中或取消選中了復選框。

我注意到我必須將canSupportAccess作為參數傳遞給函數，因為$scope.canSupportAccess不會在updateSupportAccess()內部更新，即使$scope.canSupportAccess是模型並且updateSupportAccess()在復選框更改時觸發。

為什么$scope.canSupportAccess在函數內部不起作用，如何更新updateSupportAccess()函數內部的復選框？

這是設計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”語法最佳實踐可靠地避免了這個問題，有關此約定的示例，您可以在其中使用它，請參閱StackBlitz 的 AngularJS 演示模板。

請參閱有關 AngularJS 中原型繼承主題的流行 SO 答案以進行深入研究： https : //stackoverflow.com/a/14049482/4028303