Angularjs: ইনপুট [পাঠ্য] এনজি চেঞ্জ করুন যখন মান পরিবর্তন হচ্ছে

Question 1

মান পরিবর্তন করার সময় এনজিচেন্জ গুলি চালাচ্ছে (এনজিচেনজ ক্লাসিক অন চেঞ্জ ইভেন্টটির সাথে সমান নয়)। আমি কীভাবে ক্লাসিক অন চেঞ্জ ইভেন্টটি কৌণিকর সাথে আবদ্ধ করতে পারি, এটি কেবল তখনই প্রকাশিত হবে যখন সামগ্রীগুলি সরিয়ে নেওয়া হবে?

বর্তমান বাঁধাই:

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

Question 2

এই পোস্টটি এমন একটি নির্দেশকের উদাহরণ দেখায় যা অস্পষ্ট ইভেন্টের আগুন জ্বলে না হওয়া পর্যন্ত কোনও ইনপুটটিতে মডেলটির পরিবর্তনকে বিলম্ব করে ।

এখানে এমন একটি ফ্রিডল যা নতুন এনজি-মডেল-অন-ব্লার নির্দেশনার সাথে এনজি-পরিবর্তন দেখায় working নোট করুন এটি মূল ঝাঁকুনির জন্য একটি সামান্য টুইট ।

আপনি যদি নিজের কোডটিতে নির্দেশিকা যুক্ত করেন তবে আপনি আপনার বাধ্যবাধকতা এতে পরিবর্তন করবেন:

<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। আরও তথ্যের জন্য ডক্স দেখুন ।

Question 3

এটি অ্যাঙ্গুলারজেএস-এ সাম্প্রতিক সংযোজন সম্পর্কে, ভবিষ্যতের উত্তর হিসাবে পরিবেশন করতে ( অন্য প্রশ্নের জন্যও )।

কৌণিকর নতুন সংস্করণ (এখন ১.৩ বিটাতে), কৌণিক জেএস স্থানীয়ভাবে এই বিকল্পটিকে সমর্থন করে ngModelOptions, পছন্দ করে

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

এনজিএমডেলঅ্যাপশন ডক্স

উদাহরণ:

<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

আইই 8 এর সাথে লড়াই করা প্রত্যেকের জন্য (এটি আনবাইন্ড ('ইনপুট') পছন্দ করে না, আমি এর চারপাশে একটি উপায় খুঁজে পেয়েছি।

আপনার নির্দেশ এবং ব্যবহারের মধ্যে স্ফুলার ইনজেকশন করুন:

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

আপনি যদি এটি করেন তবে আইই 8 শান্ত হয় :)

Question 6

আমার জ্ঞান অনুযায়ী আমাদের নির্বাচন বিকল্পের সাথে এনজি-পরিবর্তন ব্যবহার করা উচিত এবং পাঠ্যবক্সের ক্ষেত্রে আমাদের এনজি-ব্লার ব্যবহার করা উচিত।

Question 7

স্কোপ ভেরিয়েবলের পরিবর্তনগুলি আরও ভালভাবে প্রতিস্থাপন করতে ঘড়িটি ব্যবহার করছেন না?

Question 8

চেঞ্জের আচরণটি ডিফল্ট ইনপুটটিকে ওভাররাইড করুন (নিয়ন্ত্রণের ক্ষতির ফোকাস এবং মান পরিবর্তিত হলেই ফাংশনটি কল করুন)

দ্রষ্টব্য: এনজিচেনজ ক্লাসিক অন চেঞ্জ ইভেন্টের মতো নয় যা ইভেন্টটি পরিবর্তন করছে যখন মান পরিবর্তন হচ্ছে এই নির্দেশিকাটি উপাদানটির মান সংরক্ষণ করে যখন এটি ফোকাস পায় তখন এটি অন্বেষণ করে
এটি পরীক্ষা করে নতুন মানটি পরিবর্তিত হয়েছে কিনা এবং যদি তাই ঘটনাটি প্রজ্বলিত হয় cks

@ পরিম {স্ট্রিং} - ফাংশনটির নামটি "অন চেঞ্জ" থেকে বরখাস্ত করা উচিত inv

@ উদাহরণ <ইনপুট আমার-অন-চেঞ্জ = "মাইফঙ্ক" এনজি-মডেল = "মডেল">

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

Question 9

আমার ঠিক একই সমস্যা ছিল এবং এটি আমার পক্ষে কাজ করেছিল। যোগ করুন 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)" />