Angular.js: अलग-अलग दायरे के लिए मॉडल अपडेट से पहले ऑनचेंज को ट्रिगर किया जा रहा है

को निर्मित 21 अक्तू॰ 2013 · 11टिप्पणियाँ · स्रोत: angular/angular.js

अलग-अलग स्कोप वाले तत्वों के लिए ऑनचेंज इवेंट को मॉडल अपडेट से पहले ट्रिगर किया जा रहा है।

उदाहरण:

<!doctype html>
<html ng-app="App">
    <head>

        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
        <script src="http://code.angularjs.org/1.0.6/angular.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

        <script type="text/javascript">
            "use strict"

            var App = angular.module('App', []);
            App.controller('Ctrl', function ($scope,$timeout) {

                $scope.change1 = function () {
                    console.warn("inside change", $scope.y);
                }

                $scope.change2 = function () {
                    console.warn("inside change", $scope.x);    
                }

            });

            App.directive("wminput", function () {
                return {
                    restrict: "E",
                    replace: true,
                    scope: {
                        "onChange":"&",
                        "value": "="
                    },
                    template: '<input type="text" data-ng-model="value" data-ng-change="onChange();">'
                }
            });

        </script>

    </head>
    <body>
        <div data-ng-controller="Ctrl">
            "Onchange will be triggered after the model update"
            <input data-ng-change="change1()" data-ng-model="y">
            <br><br>
            "Onchange will be triggered before the model update"
            <wminput on-change="change2()" value="x"></wminput>
        </div>

    </body>
</html>

$compile forms low works as expected confusing bug

स्रोत

vinayk406

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

Narretz, मैं दृढ़ता से असहमत हूं। कोड का उपभोग करने वाले डेवलपर के साथ एक अनुबंध होता है जो दो-तरफ़ा बाइंडिंग पूर्वता लेता है। जब बंधन की श्रृंखला के साथ कहीं भी परिवर्तन किया जाता है, तो पूरी श्रृंखला को जारी रखने से पहले अद्यतन किया जाना चाहिए। यहां तक कि अगर एक और निर्देश इस निर्देश से विरासत में मिला है, और आगे कुछ नीचे एक बंधन के बंधन में बांधता है ... यदि उस मॉडल को अपडेट किया जाता है, तो स्टैक के निचले भाग में मूल नियंत्रक गुंजाइश मॉडल उसी पाचन चक्र में अपडेट किया जाना चाहिए अन्य कार्यों के लिए जारी है। यह उपभोक्ता से अपेक्षित है।

Suamere 31 अक्तू॰ 2016

👍20

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

दिलचस्प कोने का मामला ... http://plnkr.co/edit/lsrga8qMcbgNWATrVht3?p=preview

यह केवल तब होता है जब ऑन-चेंज फ़ंक्शन को पैरेंट स्कोप चौड़ाई 'एंड' बाइंडिंग में डेलिगेट किया जाता है।

Narretz 25 जून 2014

हम angularjs के आधार पर एक RAD टूल पर काम कर रहे हैं।
यह एक प्रमुख बग था क्योंकि आवेदन में हर विजेट को अलग किया गया है।
हमने onChange के लिए एक प्रॉक्सी विधि बनाकर समस्या का समाधान किया है।

एक नजर: https://studio.wavemaker.com/

विनय, विनय

vinayk406 25 जून 2014

क्या आप इस प्रॉक्सी का एक उदाहरण पोस्ट कर सकते हैं और इसका उपयोग कैसे किया जाता है? यह डिबगिंग में मदद कर सकता है।

Narretz 25 जून 2014

उदाहरण यहां देखें: http://plnkr.co/edit/Xe6ErQrg7WL6aAIoM9Gd?p=preview

vinayk406 26 जून 2014

क्या इसे कभी भी जल्द ठीक किया जाएगा? यह sooooo भ्रामक है।

Yankovsky 9 फ़र॰ 2016

आगे विचार करने के बाद, मुझे यह कहना है कि यह अपेक्षित व्यवहार है .. plnkr उदाहरण में, ngModel का मान नियंत्रक और निर्देश क्षेत्र के बीच दो बाध्य स्ट्रिंग है। अब जब आप निर्देश में मान बदल रहे हैं, तो ngModel पहले _isolate_ गुंजाइश को अपडेट करेगा, और उसी डाइजेस्ट में ngChange को आग देगा। चूंकि दो-तरफ़ा बाइंडिंग ने अभी तक निर्देशकीय दायरे में कोई बदलाव नहीं किया है, इसलिए पेरेंट स्कोप में ngChange को x का "पुराना" मान मिलता है। अब दो-तरफ़ा बाइंडिंग वॉचर को मूल्य को स्थिर करने के लिए कम से कम दो डाइजेस्ट साइकिलों की आवश्यकता होती है, इसलिए नियंत्रक दायरे को केवल तभी अपडेट किया जाता है जब एनकाउंटर को कॉल किया गया हो।
मैं सहमत हूं कि यह भ्रामक है, लेकिन यह है कि यह कैसे काम करता है। आप इसे उस निर्देश पर एक वस्तु को बांधकर इसे हल कर सकते हैं जो मान को आपके पास रखता है जिसे आप ngModel से बांधते हैं। इस तरह, मान को अलग-अलग और नियंत्रक दायरे दोनों में एक ही समय में संदर्भ द्वारा सेट किया जाता है और उपलब्ध है जब ngChange को निष्पादित किया जाता है: http://plnkr.co/edit/fs7S6yX1a5aeo1Esex22?p=preview

Narretz 20 फ़र॰ 2016

😕6

Suamere 31 अक्तू॰ 2016

👍20

थोड़ा संबंधित, और इसी तरह भ्रमित। का उपयोग करते समय ngChange एक और क्षेत्र है कि शेयरों एक पर ट्रिगर सत्यापन करने के लिए ngModel , परिवर्तन से पहले शुरू हो रहा है $modelValue अद्यतन किया जाता है। मान्यता को जटिल बनाना।

वर्कअराउंड के रूप में $timeout का उपयोग करना। फिर भी उलझन में है कि इसकी जरूरत क्यों है।

उदाहरण:
http://codepen.io/jakobadam/pen/qmBdrJ?editors=1010

सादर, जैकब

jakobadam 18 अप्रैल 2017

👍2

क्या इस मुद्दे पर फिर से विचार करने की कोई योजना है? शायद फिर से खोलना?

मैं इस मुद्दे पर भाग गया और टिप्पणियों के माध्यम से पढ़ रहा हूं, जबकि अलग-अलग दायरे के कारण वर्तमान में यह जिस तरह से काम करता है वह समझ में आता है; जब कोई परिवर्तन ऑन-कॉल कॉल की आग से एक अद्यतन मॉडल की उम्मीद से आता है और पिछले एक निश्चित रूप से मॉडल को एक पुनरावृत्ति मिल रहा है तो वह व्यवहार नहीं है जो आप एक डेवलपर के रूप में उम्मीद करते हैं।

bombsite 24 अप्रैल 2017

मैं सवाल का पालन करता हूं, क्या यह फिर से होना है?

nahueld 6 मई 2017

मुझे ऐसा नहीं लगता। वर्तमान व्यवहार अपेक्षित है और यद्यपि यह कुछ मामलों में वांछनीय नहीं है, कम से कम कई मामले हैं जहां यह है। इसे बदलना अब (a) एक ब्रेकिंग चेंज होगा और (b) कई यूजेस को असमर्थित कर देगा (जैसे कि जहाँ आप मूल्य #before_ को संशोधित करने के लिए ngChange चाहते हैं, यह पैरेंट को अपडेट करता है)। यह उन मामलों में से एक है जहां आप सभी को खुश नहीं कर सकते हैं, इसलिए हमें उस संस्करण के साथ रहना होगा:

समझ में आता है।
मौजूदा उपयोगकर्ताओं को नहीं तोड़ता है।
थोड़ा अतिरिक्त कोड की लागत पर (नीचे देखें), भले ही अधिक विशिष्ट / उन्नत usecases का समर्थन करता है।

का वर्तमान क्रियान्वयन ngChange कसकर की अवधारणा के लिए बाध्य है ngModel । डायरेक्टिव बाइंडिंग एक पूरी तरह से स्वतंत्र अवधारणा है। दोनों एक साथ अच्छा काम कर सकते हैं, लेकिन एक दूसरे के कार्यान्वयन / आंतरिक कामकाज को प्रभावित नहीं करना चाहिए।

#

जैसा कि पहले ही उल्लेख किया गया है, यदि आपके विशिष्ट कॉलबैक को अद्यतन मूल्य तक पहुंचने की आवश्यकता है, तो कुछ विकल्प हैं:

कॉलबैक पर तर्क के रूप में अद्यतन मान पास करें।
यदि आपको इसे अतुल्यकालिक रूप से चलाने की आवश्यकता है (यानी पाचन समाप्त होने के बाद और सभी बाइंडिंग को प्रचारित किया गया है), तो आप कॉलबैक के अंदर हमेशा $timeout उपयोग कर सकते हैं।
यदि आप ngChange का "async" संस्करण चाहते हैं, तो यह कस्टम निर्देश के रूप में लागू करने के लिए भी तुच्छ है। (आप अंतर्निहित निर्देश को भी अधिलेखित कर सकते हैं, लेकिन मैं निश्चित रूप से इसकी सिफारिश नहीं करूंगा।) जैसे।

.directive('myAsyncChange', function($timeout) {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, ctrl) {
      ctrl.$viewChangeListeners.push(function() {
        $timeout(function() {
          scope.$eval(attr.myAsyncChange);
        });
      });
    }
  };
});

<input ng-model="foo" my-async-change="onChange()" />

gkalpak 6 मई 2017

👍4

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

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

Angular.js: अलग-अलग दायरे के लिए मॉडल अपडेट से पहले ऑनचेंज को ट्रिगर किया जा रहा है

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

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

#

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