텍스트 입력의 모든 키 누르기에 AngularJS $ watch가 호출됩니다.

Question

서버에서 수신 한 동적 json 데이터에서 양식을 작성하는 웹 페이지가 있습니다. 오래 전에 KnockoutJS로 개발했습니다. 양식을 작성한 후에 양식의 값이 변경 될 때마다 서버에서 ajax 요청을 수행하여 양식을 갱신해야한다는 요구 사항이 있습니다. 여기가 fiddle 입니다. 변경 이벤트는 키 누르기가 아닌 흐림에서만 발생합니다. 예를 들어 텍스트 필드의 값이 15이고 사용자가 백 스페이스 키를 누른 다음 다시 5를 입력하면 키를 두 번 누르지 만 값이 변경되지 않았 음을 의미합니다. 여태까지는 그런대로 잘됐다.

문제 1 이제 코드를 AngularJS로 변환 중입니다. 범위의 $ watch로 변경 이벤트를 잡으려고합니다. 그러나 몇 번의 키 누름 값을 변경하지 않아도 키 누르기가 발생할 때마다 시계가 실행되는 것처럼 보입니다. 여기 내가 시도하는 방법의 fiddle입니다. 그러나이 문제는 텍스트 입력 필드에서만 발생합니다.

문제점 2 저는 수동 방식으로 방사선 그룹을 만들고 있습니다. json 데이터가 변경되면 html도 업데이트해야합니다. 나는 그것을 일종의 역동적 인 방식으로 어떻게 할 수 있는가? 나는 KnockoutJS로 그렇게 할 수있었습니다.

문제점 3 ng-hide가 작동하지 않는 이유는 무엇입니까? 문제 1

Answer 1

수정 내 지시어의 코드는 다음, 흐림 이벤트에 대한 지침을 소개했다 :

angular.module('app', []).directive('ngModelOnblur', function() { 
return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function (scope, elm, attr, ngModelCtrl) { 
     if (attr.type === 'radio' || attr.type === 'checkbox') return; 

     elm.unbind('input').unbind('keydown').unbind('change'); 
     elm.bind('blur', function() { 
      scope.$apply(function() { 
       ngModelCtrl.$setViewValue(elm.val()); 
      }); 
     }); 
    } 
}; 

이});

당신은 내가 2 문제에 대한 해결책을 알아낼 수있다 여기에 작업 바이올린 http://jsfiddle.net/akeelrehman/GNJtn/1/

을 볼 수 있습니다, 그래서 난 라디오 입력을 사용 중지되었습니다.

Answer 2

blur를 사용하는 대신 시간 초과를 사용할 수 있습니다. 사실이 함수는 사용자가 모든 키 누르기 대신에 X 밀리 초 동안 타이핑을 멈 추었을 때 함수를 호출합니다. https://stackoverflow.com/a/15723514/1034002