[angularjs] Angularjs : input [text] ngChange는 값이 변경되는 동안 발생합니다.

Question 1

값이 변경되는 동안 ngChange가 실행됩니다 (ngChange는 클래식 onChange 이벤트와 유사하지 않음). 콘텐츠가 커밋 될 때만 실행되는 angularjs로 클래식 onChange 이벤트를 바인딩하려면 어떻게해야합니까?

현재 바인딩 :

<input type="text" ng-model="name" ng-change="update()" />

Question 2

이 게시물 은 흐림 이벤트가 발생할 때까지 입력에 대한 모델 변경을 지연시키는 지시문의 예를 보여줍니다 .

다음 은 새로운 ng-model-on-blur 지시문과 함께 작동하는 ng-change를 보여주는 바이올린입니다. 이것은 원래 바이올린 을 약간 조정 한 것 입니다.

코드에 지시문을 추가하면 다음과 같이 바인딩을 변경할 수 있습니다.

<input type="text" ng-model="name" ng-model-onblur ng-change="update()" />

다음은 지시문입니다.

// override the default input to update on blur
angular.module('app', []).directive('ngModelOnblur', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        priority: 1, // needed for angular 1.2.x
        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());
                });
            });
        }
    };
});

참고 : @wjin이 아래 주석에서 언급했듯이이 기능은를 통해 Angular 1.3 (현재 베타 버전)에서 직접 지원됩니다 ngModelOptions. 자세한 정보 는 문서 를 참조하십시오.

Question 3

이것은 AngularJS에 대한 최근 추가 사항으로 향후 답변으로 사용됩니다 (또한 다른 질문에 대해서도 ).

(현재 베타 1.3) 각도 최신 버전은 AngularJS와는 기본적으로 사용이 옵션을 지원하는 ngModelOptions등,

ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"

NgModelOptions 문서

예:

<input type="text" name="username"
       ng-model="user.name"
       ng-model-options="{updateOn: 'default blur', debounce: {default: 500, blur: 0} }" />

Question 4

추가 “입력”키 누르기 지원을 찾는 다른 사람을 위해 Gloppy에서 제공 하는 바이올린에 대한 업데이트가 있습니다.

키 누르기 바인딩을위한 코드 :

elm.bind("keydown keypress", function(event) {
    if (event.which === 13) {
        scope.$apply(function() {
            ngModelCtrl.$setViewValue(elm.val());
        });
    }
});

Question 5

IE8로 어려움을 겪는 사람을 위해 (unbind ( ‘input’)이 마음에 들지 않는 경우, 그에 대한 방법을 찾았습니다.

$ sniffer를 지시문에 삽입하고 다음을 사용하십시오.

if($sniffer.hasEvent('input')){
    elm.unbind('input');
}

이렇게하면 IE8이 진정됩니다. 🙂

Question 6

내 지식에 따르면 선택 옵션과 함께 ng-change를 사용해야하고 텍스트 상자의 경우 ng-blur를 사용해야합니다.

Question 7

$ scope. $ watch를 사용하여 범위 변수의 변경 사항을 더 잘 반영하지 않습니까?

Question 8

기본 입력 onChange 동작 재정의 (제어 손실 포커스 및 값이 변경된 경우에만 함수 호출)

참고 : ngChange는이 포커스를 취득했을 때, 값이 지시문 저장을 요소의 값을 변경하는 동안이 이벤트를 발사 고전 OnChange 이벤트와 유사한없는
새로운 값을 변경하고 있는지 흐림 그것을 검사에 경우는 이벤트를 발생하므로

@param {String}- “onChange”가 실행되어야 할 때 호출 할 함수 이름

@example <input my-on-change = “myFunc”ng-model = “model”>

angular.module('app', []).directive('myOnChange', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            myOnChange: '='
        },
        link: function (scope, elm, attr) {
            if (attr.type === 'radio' || attr.type === 'checkbox') {
                return;
            }
            // store value when get focus
            elm.bind('focus', function () {
                scope.value = elm.val();

            });

            // execute the event when loose focus and value was change
            elm.bind('blur', function () {
                var currentValue = elm.val();
                if (scope.value !== currentValue) {
                    if (scope.myOnChange) {
                        scope.myOnChange();
                    }
                }
            });
        }
    };
});