Angularjs: giriş [metin] ngDeğer değişirken ateşleri değiştirin

ngChange, değer değişirken tetikleniyor (ngChange, klasik onChange olayına benzemez). Klasik onChange olayını angularjs ile nasıl bağlayabilirim, bu sadece içerikler işlendiğinde tetiklenir?

Mevcut bağlama:

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

Bu gönderi , bulanıklık olayı tetiklenene kadar model değişikliklerini bir girişte geciktiren bir direktif örneğini gösterir .

İşte bir keman olduğunu gösteriyor yeni ng model-on-bulanıklık yönergesi ile çalışan ng-değişim. Bunun orijinal keman için küçük bir değişiklik olduğunu unutmayın .

Yönergeyi kodunuza eklerseniz, buna bağlamanızı değiştirirsiniz:

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

Yönerge şu şekildedir:

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

Not: @wjin aşağıdaki yorumlarda da belirtildiği gibi, bu özellik doğrudan Angular 1.3'te (şu anda beta sürümünde) desteklenmektedir ngModelOptions. Daha fazla bilgi için belgelere bakın .

Bu, AngularJS'e gelecekteki yanıt olarak hizmet edecek (ayrıca başka bir soru için ) son eklemelerle ilgilidir .

(Şimdi beta 1.3 olarak) Açısal yeni sürümleri, angularjs yerel kullanarak, bu seçeneği destekliyor ngModelOptionsgibi

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

NgModelOptions belgeleri

Misal:

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

Ek "enter" tuşa basma desteği arayan başka birinin olması durumunda, işte Gloppy tarafından sağlanan keman için bir güncelleme.

Tuşa basma bağlama kodu:

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

IE8 ile mücadele eden herkes için (çözmeyi ('giriş') sevmiyor, etrafında bir yol buldum.

Yönergenize $ sniffer ekleyin ve şunu kullanın:

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

Bunu yaparsan IE8 sakinleşir :)

Bildiğim kadarıyla ng-değişimini seçme seçeneği ile kullanmalıyız ve metin kutusu durumunda ng-blur kullanmalıyız.

Kapsam değişkenindeki değişiklikleri daha iyi yansıtmak için $ kapsam. $ Watch kullanmıyor mu?

OnChange davranışındaki varsayılan girdiyi geçersiz kılın (işlevi yalnızca kontrol kaybı odağı ve değer değiştiğinde çağırın)

NOT: ngChange, değer değişirken olayı tetikleyen klasik onChange olayına benzemez Bu yönerge, odağı aldığında öğenin değerini saklar
Bulanıklaştırırsa, yeni değerin değişip değişmediğini kontrol eder ve eğer öyleyse olayı tetikler

@param {String} - "onChange" tetiklendiğinde çağrılacak işlev adı

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

Tam olarak aynı sorunu yaşadım ve bu benim için çalıştı. Ve ekleyin ng-model-updateve ng-keyupgitmeniz iyi olur! İşte dokümanlar

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