ANGULARJS：我在 ng-checked 指令中的函数无限运行

Question

尝试做一些我认为很简单的事情，但结果却很烦人。我只是想在您使用 ng-checked 指令单击复选框时运行一个函数。

这是HTML:

    <div class="form-group">
        <label class="col-sm-2 control-label">Make Payment Optional</label>
        <div class="col-sm-4 center-checkbox">
            <input type="checkbox"
                   class="center-checkbox"
                   ng-model="formData.optionalPayment"
                   ng-checked="optionalPaymentCheckbox();"
                   validate-servererror="featured"/>
        </div>
    </div>

这是 Angular:

if($scope.formData.optionalPayment === undefined) {
  $scope.formData.optionalPayment = TournamentConst.PAYMENT.OPTIONAL;
}

（此检查仅适用于我第一次加载页面时。）

$scope.optionalPaymentCheckbox = function () {
  if($scope.formData.optionalPayment === TournamentConst.PAYMENT.OPTIONAL) {
    $scope.formData.optionalPayment = TournamentConst.PAYMENT.MANDATORY;
  } else {
    $scope.formData.optionalPayment = TournamentConst.PAYMENT.OPTIONAL;
  }
};

当我加载页面时，这个 ng-checked 函数会无限运行。关于 ng-checked 指令有什么我不知道的，或者一些次要的细节或者忘记了吗？提前致谢。

Answer 1

您误解了 ng-checked 的意图。您认为它的作用是 "execute this expression when the checkbox is checked" - 事件处理程序指令。

它实际上做的是根据表达式设置 checked 属性。这意味着它会在表达式上设置监视并在每个摘要中对其进行评估。如果值发生变化，它会相应地设置或取消设置 checked 属性。

事实上，documentation for ng-checked 是这样说的：

Note that this directive should not be used together with ngModel, as this can lead to unexpected behavior.

正如@JB Nizet 正确指出的那样，您可以通过使用 ng-true-value 和 ng-false-value 并完全删除 ng-checked 来在您的特定情况下达到预期的效果。

所以你的 HTML 变成：

<div class="form-group">
    <label class="col-sm-2 control-label">Make Payment Optional</label>
    <div class="col-sm-4 center-checkbox">
        <input type="checkbox"
               class="center-checkbox"
               ng-model="formData.optionalPayment"
               ng-true-value="TournamentConst.PAYMENT.MANDATORY"
               ng-false-value="TournamentConst.PAYMENT.OPTIONAL"
               validate-servererror="featured"/>
    </div>
</div>

然后，在您的控制器中，在范围内填充您的 TournamentConst 对象，以便模板可以看到它：

$scope.TournamentConst = TournamentConst;

（或者您可以只填充您需要的位）

最后，去掉整个 $scope.optionalPaymentCheckbox 函数。不过，您仍然需要代码来设置默认值。

最后一件事：令人困惑的是属性被称为 optionalPayment，而实际上它更像 paymentType，但这与当前问题无关。

ANGULARJS：我在 ng-checked 指令中的函数无限运行

ANGULARJS: Function I have in ng-checked directive runs infinitely

html

forms

checkbox

angularjs

angularjs-ng-checked