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>

А это Угловой

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, которую я не знаю, или какая-то мелочь или забыли? Заранее спасибо.

Answer 1

Вы неправильно понимаете намерение ng-checked, То, что вы думаете, это "выполнить это выражение, когда флажок установлен" - директива обработчика событий.

Что он на самом деле делает, так это устанавливает checked свойство на основе выражения. Это означает, что он устанавливает наблюдение за выражением и оценивает его каждый дайджест. Если значение изменяется, оно устанавливает или отменяет checked собственность соответственно.

На самом деле, документация дляng-checked говорит это:

Обратите внимание, что эта директива не должна использоваться вместе с ngModel, так как это может привести к неожиданному поведению.

Как правильно заметил @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, но это не связано с текущей проблемой.