Angularjs: input [tekst] ngChange uruchamia się podczas zmiany wartości

ngChange odpala, gdy wartość się zmienia (ngChange nie są podobne do klasycznego zdarzenia onChange). Jak mogę powiązać klasyczne zdarzenie onChange z angularjs, które będzie uruchamiane tylko wtedy, gdy zawartość zostanie zatwierdzona?

Aktualne wiązanie:

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

W tym poście przedstawiono przykład dyrektywy, która opóźnia zmiany modelu na dane wejściowe do momentu uruchomienia zdarzenia rozmycia .

Oto skrzypce, które pokazują zmianę ng działającą z nową dyrektywą ng-model-on-blur. Zwróć uwagę, że jest to niewielka modyfikacja oryginalnych skrzypiec .

Jeśli dodasz dyrektywę do swojego kodu, zmienisz swoje powiązanie na to:

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

Oto dyrektywa:

// 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());
                });         
            });
        }
    };
});

Uwaga: jak @wjin wspomina w komentarzach poniżej, ta funkcja jest obsługiwana bezpośrednio w Angular 1.3 (obecnie w wersji beta) przez ngModelOptions. Zobacz dokumentację, aby uzyskać więcej informacji.

Chodzi o ostatnie dodatki do AngularJS, które mają służyć jako przyszła odpowiedź (także na inne pytanie ).

Nowsze wersje Angulara (teraz w 1.3 beta), AngularJS natywnie obsługuje tę opcję, używając ngModelOptionsnp

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

Dokumentacja NgModelOptions

Przykład:

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

W przypadku, gdy ktoś szuka dodatkowej obsługi klawisza „enter”, oto aktualizacja skrzypiec dostarczonych przez Gloppy

Kod do przypisywania klawiszy:

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

Dla każdego, kto zmaga się z IE8 (nie lubi unbind ('input'), znalazłem sposób na obejście tego.

Wprowadź $ sniffer do swojej dyrektywy i użyj:

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

IE8 uspokaja się, jeśli to zrobisz :)

Zgodnie z moją wiedzą powinniśmy używać opcji ng-change z opcją select, aw przypadku pola tekstowego - ng-blur.

Czy nie używa się $ scope. $ Watch do lepszego odzwierciedlenia zmian zmiennej zakresu?

Zastąp domyślne dane wejściowe zachowanie onChange (wywołaj funkcję tylko wtedy, gdy fokus utraty kontroli i wartość zostały zmienione)

UWAGA: ngChange nie jest podobna do klasycznej imprezy onChange to wypalania zdarzenie natomiast wartość zmienia niniejszej dyrektywy Przechowuje wartość elementu, gdy robi się skupić
Na rozmywa sprawdza, czy nowa wartość uległa zmianie, a jeśli tak to odpala zdarzenie

@param {String} - nazwa funkcji, która ma zostać wywołana, gdy ma zostać uruchomiona funkcja „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();
                    }
                }
            });
        }
    };
});

Miałem dokładnie ten sam problem i to zadziałało. Dodaj ng-model-updatei ng-keyupgotowe! Oto dokumenty

 <input type="text" name="userName"
         ng-model="user.name"
         ng-change="update()"
         ng-model-options="{ updateOn: 'blur' }"
         ng-keyup="cancel($event)" />