Angular.js: ngModelController $parsers फ़ंक्शन को लगातार नहीं कहा जाता है

को निर्मित 10 अग॰ 2015 · 3टिप्पणियाँ · स्रोत: angular/angular.js

ngModelController $parser फ़ंक्शन का उपयोग करके कुछ नियमों के अनुरूप इनपुट मानों को लागू करते समय, $parser फ़ंक्शन को बार-बार "अमान्य" कीस्ट्रोक्स पर नहीं कहा जाता है, जो अमान्य वर्णों को जोड़ने की अनुमति देता है।

नीचे दिए गए उदाहरण में, निर्देश सभी गैर-अंकीय वर्णों को हटाने के लिए है। यह ज्यादातर काम करता है, लेकिन यदि आप एक ही गैर-अंकीय वर्ण को लगातार दो बार टाइप करते हैं (जैसे 'xx'), तो इनपुट में एक 'x' दिखाई देगा। यदि आप तीसरी बार 'x' टाइप करते हैं, तो यह 'x' को हटा देगा।

मैंने एक असफल परीक्षण मामला भी शामिल किया है।

सभी कोड http://codepen.io/visnup/pen/YXgLVq?editors=101 पर चल रहे हैं

निर्देशात्मक उपयोग

<div ng-app="digits">
  <input ng-model="number" placeholder="digits only" digits-only />
</div>

आदेश

angular
  .module('digits', [])
  .directive('digitsOnly', function() {
    return {
      require: 'ngModel',
      link: function link(scope, element, attrs, ngModel) {
        ngModel.$parsers.push(function(value) {
          var numbers = value.replace(/\D/g, '');
          element.val(numbers);
          return numbers;
        });
      }
    };
  });

असफल परीक्षण मामला

describe('digits', function() {
  beforeEach(angular.mock.module('digits'));

  let scope, input;
  beforeEach(inject(function($compile, $rootScope) {
    scope = $rootScope;
    input = $compile('<input ng-model="number" digits-only />')(scope);
  }));

  // works
  it('should block non-digits', function() {
    input.val('111x');
    input.triggerHandler('input');
    expect(input.val()).to.equal('111');
  });

  // doesn't work
  it('should not flash incorrect input', function() {
    input.val('111x');
    input.triggerHandler('input');
    input.val('111x');
    input.triggerHandler('input');
    expect(input.val()).to.equal('111');
  });
});

इसे पहले #10700 में लाया जा चुका है।

स्रोत

visnup

👍1

सबसे उपयोगी टिप्पणी

$parsers $viewValue को $modelValue रूप में "सहेजने" से पहले बदलने (की एक प्रति) के लिए है (और यही आपका उदाहरण कर रहा है)। यह वास्तव में $viewValue को नहीं बदल रहा है (हालांकि यह तत्व के मूल्य को अपडेट करता है), जिससे अप्रत्याशित व्यवहार होता है।

यह एक उदाहरण के साथ बेहतर सचित्र है:

उपयोगकर्ता '1' में प्रवेश करता है।
- _पहले_ पार्सिंग:
  - $modelValue : अपरिभाषित
  - $viewValue : 1
  - element.val() : 1
- _बाद_ पार्सिंग:
  - $modelValue : 1
  - $viewValue : 1
  - element.val() : 1
उपयोगकर्ता 'x' में प्रवेश करता है।
- _पहले_ पार्सिंग:
  - $modelValue : 1
  - $viewValue : 1x
  - element.val() : 1x
- _बाद_ पार्सिंग:
  - $modelValue : 1
  - $viewValue : 1x (पार्सर एफएन से कभी अपडेट नहीं किया गया)
  - element.val() : 1 (पार्सर एफएन से अद्यतन)
उपयोगकर्ता 'x' में प्रवेश करता है।
- _पहले_ पार्सिंग:
  - $modelValue : 1
  - $viewValue : 1x (कोई परिवर्तन नहीं पाया गया, क्योंकि पिछला $viewValue भी 1x )
  - element.val() : 1x
- _No_ पार्सिंग (चूंकि $viewValue में कोई परिवर्तन नहीं पाया गया) !!!
  - $modelValue : 1
  - $viewValue : 1x
  - element.val() : 1x
उपयोगकर्ता 'x' में प्रवेश करता है।
- _पहले_ पार्सिंग:
  - $modelValue : 1
  - $viewValue : 1xx
  - element.val() : 1xx
- _बाद_ पार्सिंग:
  - $modelValue : 1
  - $viewValue : 1xx
  - element.val() : 1
_(...बैक टू स्टेप (2)...)_

इसे ठीक से संभालने के कई "कोणीय" तरीके हैं, जैसे:

ngModel.$parsers.push(function (value) {
  var numbers = value.replace(/\D/g, '');
  if (numbers !== value) {
    ngModel.$setViewValue(numbers);   // Update the `$viewValue`
    ngModel.$render();                // Update the element's displayed value
  }
  return numbers;
});

अपडेट किया गया पेन

मैं इसे बंद कर रहा हूं, क्योंकि सब कुछ उम्मीद के मुताबिक काम कर रहा है।
@visnup , अगर कुछ भी स्पष्ट नहीं है तो प्रश्नों का पालन करने के लिए स्वतंत्र महसूस करें।

gkalpak 18 अग॰ 2015

👍3 🎉1

सभी 3 टिप्पणियाँ

यह एक उदाहरण के साथ बेहतर सचित्र है:

उपयोगकर्ता '1' में प्रवेश करता है।
- _पहले_ पार्सिंग:
  - $modelValue : अपरिभाषित
  - $viewValue : 1
  - element.val() : 1
- _बाद_ पार्सिंग:
  - $modelValue : 1
  - $viewValue : 1
  - element.val() : 1
उपयोगकर्ता 'x' में प्रवेश करता है।
- _पहले_ पार्सिंग:
  - $modelValue : 1
  - $viewValue : 1x
  - element.val() : 1x
- _बाद_ पार्सिंग:
  - $modelValue : 1
  - $viewValue : 1x (पार्सर एफएन से कभी अपडेट नहीं किया गया)
  - element.val() : 1 (पार्सर एफएन से अद्यतन)
उपयोगकर्ता 'x' में प्रवेश करता है।
- _पहले_ पार्सिंग:
  - $modelValue : 1
  - $viewValue : 1x (कोई परिवर्तन नहीं पाया गया, क्योंकि पिछला $viewValue भी 1x )
  - element.val() : 1x
- _No_ पार्सिंग (चूंकि $viewValue में कोई परिवर्तन नहीं पाया गया) !!!
  - $modelValue : 1
  - $viewValue : 1x
  - element.val() : 1x
उपयोगकर्ता 'x' में प्रवेश करता है।
- _पहले_ पार्सिंग:
  - $modelValue : 1
  - $viewValue : 1xx
  - element.val() : 1xx
- _बाद_ पार्सिंग:
  - $modelValue : 1
  - $viewValue : 1xx
  - element.val() : 1
_(...बैक टू स्टेप (2)...)_

इसे ठीक से संभालने के कई "कोणीय" तरीके हैं, जैसे:

ngModel.$parsers.push(function (value) {
  var numbers = value.replace(/\D/g, '');
  if (numbers !== value) {
    ngModel.$setViewValue(numbers);   // Update the `$viewValue`
    ngModel.$render();                // Update the element's displayed value
  }
  return numbers;
});

अपडेट किया गया पेन

gkalpak 18 अग॰ 2015

👍3 🎉1

यह समस्या किसी भी समय दोहराए जाने वाले कीस्ट्रोक के साथ होती है जब नया $viewValue प्रतिबद्ध नहीं होता है। $parsers संग्रह में $setViewValue के सुझाए गए उपयोग को कभी-कभी कुछ फ़ोरम में सीधे $viewValue सेट करने की प्राथमिकता के साथ टाला जाता है।

निम्नलिखित भी काम करेंगे:

ngModel.$viewValue = numbers;   // Update the '$viewValue'
ngModel.$commitViewValue(); //update $$lastCommittedViewValue
ngModel.$render();                // Update the element's displayed value

यदि आप किसी भी रिकर्सन नुकसान से बचना चाहते हैं तो $$lastCommittedViewValue को सीधे अपडेट किया जा सकता है यदि आपको एनकैप्सुलेशन का उल्लंघन करने में कोई आपत्ति नहीं है। दुर्भाग्य से जब इन कार्यों में अनंत रिकर्सन होता है तो मैंने ऐसे मामले देखे हैं जहां अधिकतम घटनाओं के बाद भी कंसोल को इसकी सूचना नहीं दी जाती है। परीक्षण के दौरान ब्रेक प्वाइंट लगाने और किसी भी रिकर्सन को सत्यापित करने के लिए कुछ मिनटों का समय लगता है।

matthewerwin 25 सित॰ 2015

👍3

@gkalpak और @snaptech स्पष्टीकरण एक साथ मिलकर एक सुनहरा समाधान बनाते हैं :): +1:

jeserkin 7 जुल॰ 2016

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Angular.js: ngModelController $parsers फ़ंक्शन को लगातार नहीं कहा जाता है

सबसे उपयोगी टिप्पणी

सभी 3 टिप्पणियाँ

संबंधित मुद्दों