Angularjs: input [text] ngChange เริ่มทำงานในขณะที่ค่ากำลังเปลี่ยนแปลง

ngChange กำลังเริ่มทำงานในขณะที่ค่ากำลังเปลี่ยนแปลง (ngChange ไม่เหมือนกับเหตุการณ์ onChange แบบคลาสสิก) ฉันจะผูกเหตุการณ์ onChange แบบคลาสสิกกับ angularjs ได้อย่างไรซึ่งจะเริ่มทำงานเมื่อมีการคอมมิตเนื้อหาเท่านั้น

ผลผูกพันปัจจุบัน:

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

โพสต์นี้แสดงตัวอย่างของคำสั่งที่หน่วงเวลาให้โมเดลเปลี่ยนเป็นอินพุตจนกว่าเหตุการณ์เบลอจะเริ่มทำงาน

นี่คือซอที่แสดงการเปลี่ยนแปลงของ ng-change ที่ทำงานร่วมกับคำสั่ง ng-model-on-เบลอใหม่ หมายเหตุ: นี่คือการปรับแต่งเล็กน้อยกับซอเดิม

หากคุณเพิ่มคำสั่งลงในรหัสของคุณคุณจะเปลี่ยนการเชื่อมโยงเป็นสิ่งนี้:

<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 กล่าวถึงในความคิดเห็นด้านล่างคุณลักษณะนี้ได้รับการสนับสนุนโดยตรงในเชิงมุม 1.3 (ปัจจุบันอยู่ในรุ่นเบต้า) ngModelOptionsผ่าน ดูเอกสารสำหรับข้อมูลเพิ่มเติม

นี่เป็นข้อมูลเกี่ยวกับการเพิ่มล่าสุดของ AngularJS เพื่อใช้เป็นคำตอบในอนาคต (สำหรับคำถามอื่นด้วย )

Angular เวอร์ชันที่ใหม่กว่า (ตอนนี้อยู่ใน 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} }" />

ในกรณีที่ใครก็ตามที่กำลังมองหาการสนับสนุนการกดแป้น "enter" เพิ่มเติมนี่คือการอัปเดตของซอที่มีให้โดยGloppy

รหัสสำหรับการกดแป้นพิมพ์:

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

สำหรับใครก็ตามที่กำลังดิ้นรนกับ IE8 (ไม่ชอบการเลิกผูก ('อินพุต') ฉันพบวิธีแก้ไข

ฉีด $ sniffer ลงในคำสั่งของคุณและใช้:

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

IE8 สงบลงถ้าคุณทำสิ่งนี้ :)

ตามความรู้ของฉันเราควรใช้ ng-change กับตัวเลือกเลือกและในกล่องข้อความเราควรใช้ ng-เบลอ

ไม่ได้ใช้ $ scope $ watch เพื่อสะท้อนการเปลี่ยนแปลงของตัวแปรขอบเขตดีกว่าหรือ?

แทนที่อินพุตเริ่มต้น onChange behavior (เรียกใช้ฟังก์ชันเฉพาะเมื่อโฟกัสการสูญเสียการควบคุมและค่าเปลี่ยนแปลง)

หมายเหตุ: 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();
                    }
                }
            });
        }
    };
});

ฉันมีปัญหาเดียวกันทุกประการและสิ่งนี้ใช้ได้ผลสำหรับฉัน เพิ่มng-model-updateและng-keyupคุณพร้อมที่จะไป! นี่คือเอกสาร

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