ANGULARJS : ng-check 지시문에있는 함수가 무한히 실행됩니다.

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 속성을 설정하거나 해제합니다. 이 예기치 않은 동작이 발생할 수 있으므로이 지시어는, ngModel과 함께 사용할 수 없습니다 것을

참고 :

는 사실, documentation for ng-checked이 말한다. @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과 비슷하지만 현재 문제와 관련이 없습니다.