AngularJS: jQuery के साथ बदले जाने पर एनजी-मॉडल बाइंडिंग अद्यतन नहीं

Question

यह मेरा HTML है:

<input id="selectedDueDate" type="text" ng-model="selectedDate" />

जब मैं बॉक्स में टाइप करता हूं, तो मॉडल को 2-वे-बाइंडिंग तंत्र के माध्यम से अपडेट किया जाता है। मिठाई।

हालांकि जब मैं JQuery के माध्यम से यह कर ...

$('#selectedDueDate').val(dateText);

यह मॉडल को अपडेट नहीं करता है। क्यों?

Comments

आप शुरुआत करने के लिए दूसरा काम क्यों करेंगे? आप एक रूपरेखा का उपयोग कर रहे हैं और फिर इसे दरकिनार करने और DOM हेरफेर के माध्यम से मान सेट करने का निर्णय ले रहे हैं। सर्वश्रेष्ठ सलाह एक शुरुआती लोगों को कोणीय के साथ दे सकता है: भूल जाते हैं कि jquery मौजूद है। 90% मामलों में कोणीय पर्याप्त होगा और शेष 10% एक निर्देश के लिंक के अंदर jqlite के माध्यम से प्राप्त किया जा सकता है (तत्व वास्तव में एक jqlite लिपटे तत्व है जो हेरफेर करने के लिए तैयार है)।

— शून्य

बहुत महत्वपूर्ण सवाल

— सैयद मो। कमरुज्जमाँ

वहाँ बहुत अच्छे कारण हैं कि आप डोम हेरफेर के साथ कोणीय मॉडल को बदलना चाह सकते हैं, शायद आप ए / बी परीक्षण उपकरण के साथ काम करने वाले देव हैं और पर्दे के पीछे के रूपों को भरना चाहते हैं, या आप एक स्क्रिप्ट स्क्रिप्ट पर काम कर रहे हैं ऑटोफिल रूपों के लिए।

— शादेज़

Answer 1

कोणीय उस परिवर्तन के बारे में नहीं जानता। इसके लिए आपको कॉल करना चाहिए $scope.$digest()या अंदर बदलाव करना चाहिए $scope.$apply():

$scope.$apply(function() { 
   // every changes goes here
   $('#selectedDueDate').val(dateText); 
});

गंदी-जाँच को बेहतर समझने के लिए इसे देखें

अद्यतन : यहाँ एक उदाहरण है

Comments

मैंने आपको इस तरह से कहा: fiddle.jshell.net/AladdinMhaimeed/agvTz/8 लेकिन यह काम नहीं करता है

— अलादीन ममेड़

इस fiddle.jshell.net/agvTz/38 को देखें function। आपको $ स्कोप को कॉल करना चाहिए । $ फ़ंक्शन को तर्क के रूप में लागू करना। और $ लागू कॉल किया जाना चाहिए जब आप $ गुंजाइश पर बदलाव करेंगे, इसलिए, ऑनसेलेक्ट के अंदर। आह, मुझे उम्मीद है कि आपने नियंत्रक के अंदर डोम हेरफेर को उदाहरण के लिए, एक वास्तविक ऐप में यह गलत है;)

— रेनन टोमल फर्नांडीस

तो मुझे अच्छा कोणीय अभ्यास करने के लिए क्या करना चाहिए? एक निर्देश में अलग डोम हेरफेर?

— अलादीन ने

हां, यहां एक उदाहरण fiddle.jshell.net/agvTz/39 निर्देश का उपयोग कई बार किया जा सकता है जैसा कि आप datepicker="scopeKeyThatYouWant"इनपुट में एक सरल के साथ चाहते हैं

— रेनन टोमल फर्नांडीस

बस बुलाओ .. $ गुंजाइश। $ पचाने के लिए ()। क्या यह धीमा होगा?

— थान ज़िन

Answer 2

महज प्रयोग करें;

$('#selectedDueDate').val(dateText).trigger('input');

Comments

मैं trigger('input')इसके onSelectआयोजन में एक तारीख के साथ इस्तेमाल किया । यह मान को सही ढंग से अपडेट करता है।

— इमान

इसने मेरे लिए चाल चली। मैं एक निर्देश परीक्षा से एक बाध्य इनपुट के मूल्य को अपडेट कर रहा था और .val('something'कॉल को $apply(या $digestबाद में कॉल करना ) काम में नहीं लिया था।

— टॉम सेलडन

घंटों की खोज के बाद, यह वही था जिसने काम किया! धन्यवाद!

— दान

अल्हम्दुलिल्लाह, परिपूर्ण, मेरे लिए काम कर रहा है। मेरे घंटों को बचाने के लिए धन्यवाद

— सैयद मो। कमरुज्जमाँ

सच। मैं उपयोग कर रहा था $('#selectedDueDate').val(dateText).trigger('change');जो मेरे लिए काम नहीं कर रहा था । .trigger('input');जादू की तरह काम करता है

— jafarbtech

Answer 3

मैंने पाया है कि अगर आप वेरिएबल को सीधे उस दायरे के खिलाफ नहीं रखते हैं जो इसे अधिक विश्वसनीय तरीके से अपडेट करता है।

कुछ "dateObj.selectedDate" का उपयोग करने का प्रयास करें और कंट्रोलर में चयनित डेट को डेटऑब्ज ऑब्जेक्ट में जोड़ें:

$scope.dateObj = {selectedDate: new Date()}

इसने मेरे लिए काम किया।

Comments

यह मेरे लिए भी काम किया। मैं 2 घंटे से अधिक समय बर्बाद करने की कोशिश कर रहा था कि दो-तरफा बाध्यकारी काम क्यों नहीं कर रहा था। इसने पृष्ठ पर ठीक काम किया, लेकिन नियंत्रक में गुंजाइश अपडेट नहीं की जा रही थी। तब मैंने आपके दृष्टिकोण से हताशा की कोशिश की (क्योंकि इससे मुझे कोई मतलब नहीं था कि यह सच होना चाहिए) और गर्म लानत है, यह काम किया! धन्यवाद!

— टीएमसी

यहाँ भी - क्या कोई कोणीयJs गुरु समझा सकता है कि यह क्यों काम करता है? यह देखने के समान है कि यह स्वयं नेस्टेड स्कोप है और कभी-कभी आप केवल व्यू-स्कोप को अपडेट करते हुए अटक जाते हैं, न कि कंट्रोलर-स्कोप

— टॉम कार्वर

मेरे लिए अच्छा काम करता है! मुझे आश्चर्य है कि क्यों बिल्ली में यह नंगे गुंजाइश पर एक ही काम नहीं करता है।

— स्टीफन

यह कोणीय के साथ बहुत कम है, और जावास्क्रिप्ट कैसे काम करता है, इसके साथ बहुत कुछ करना है। जब आप किसी ऑब्जेक्ट को स्कोप वैरिएबल असाइन करते हैं, तो आप इसे रेफरेंस द्वारा असाइन कर रहे हैं, जैसा कि वैल्यू द्वारा किया जाता है, जब कोई वर्जन एक प्राइमैटिव वैल्यू के बराबर सेट होता है। मैंने इसके बारे में अपनी पोस्ट में यहां बात की थी। stackoverflow.com/questions/14527377/… । मैंने plnkr.co/edit/WkCT6aYao3qCmzJ8t5xg?p=preview को दर्शाने के लिए उस पोस्ट में किए गए इस प्लंक का उल्लेख किया ।

— निक ब्रैडी

Answer 4

इसे इस्तेमाल करे

var selectedDueDateField = document.getElementById("selectedDueDate");
var element = angular.element(selectedDueDateField);
element.val('new value here');
element.triggerHandler('input');

Comments

जब आप कोणीय के नियंत्रक $ क्षेत्र तक पहुंच नहीं है तो यह प्रयोग करने योग्य है। उदाहरण के लिए, जब आप टैम्परमॉन्की के साथ एक स्क्रिप्ट लिखते हैं।

— 9

Answer 5

अपने फ़ंक्शन के अंत में बस निम्न पंक्ति चलाएँ:

$ गुंजाइश। $ लागू ()

Answer 6

कोपुलर के स्कोप के बाहर जो कुछ भी होता है, एंगुलर को कभी पता नहीं चलेगा।

डाइजेस्ट चक्र ने मॉडल -> कंट्रोलर और फिर कंट्रोलर -> मॉडल से बदलाव लाए।

यदि आपको नवीनतम मॉडल देखने की आवश्यकता है, तो आपको पाचन चक्र को ट्रिगर करने की आवश्यकता है

लेकिन प्रगति में एक पाचन चक्र का एक मौका है, इसलिए हमें चक्र की जांच करने और उसमें प्रवेश करने की आवश्यकता है।

अधिमानतः, हमेशा एक सुरक्षित आवेदन करें।

       $scope.safeApply = function(fn) {
            if (this.$root) {
                var phase = this.$root.$$phase;
                if (phase == '$apply' || phase == '$digest') {
                    if (fn && (typeof (fn) === 'function')) {
                        fn();
                    }
                } else {
                    this.$apply(fn);
                }
            }
        };


      $scope.safeApply(function(){
          // your function here.
      });

Answer 7

AngularJS स्ट्रिंग, संख्याओं और बूलियनों को मूल्य से गुजारता है जबकि यह सरणियों और वस्तुओं को संदर्भ से गुजरता है। तो आप एक खाली ऑब्जेक्ट बना सकते हैं और अपनी तिथि को उस ऑब्जेक्ट की संपत्ति बना सकते हैं। इस तरह कोणीय मॉडल परिवर्तनों का पता लगाएगा।

नियंत्रक में

app.module('yourModule').controller('yourController',function($scope){
$scope.vm={selectedDate:''}
});

Html में

<div ng-controller="yourController">
<input id="selectedDueDate" type="text" ng-model="vm.selectedDate" />
</div>

Answer 8

आपको इनपुट तत्व के परिवर्तन की घटना को ट्रिगर करना होगा क्योंकि एनजी-मॉडल इनपुट घटनाओं को सुनता है और गुंजाइश अपडेट की जाएगी। हालाँकि, नियमित jQuery ट्रिगर मेरे लिए काम नहीं करता था। लेकिन यहाँ एक आकर्षण की तरह काम करता है

$("#myInput")[0].dispatchEvent(new Event("input", { bubbles: true })); //Works

निम्नलिखित काम नहीं किया

$("#myInput").trigger("change"); // Did't work for me

आप सिंथेटिक घटनाओं को बनाने और भेजने के बारे में अधिक पढ़ सकते हैं ।

Answer 9

मैंने jQuery के लिए इस छोटे से प्लगइन को लिखा है जो .val(value)अगर मौजूद है तो कोणीय तत्व को अपडेट करने के लिए सभी कॉल करेगा :

(function($, ng) {
  'use strict';

  var $val = $.fn.val; // save original jQuery function

  // override jQuery function
  $.fn.val = function (value) {
    // if getter, just return original
    if (!arguments.length) {
      return $val.call(this);
    }

    // get result of original function
    var result = $val.call(this, value);

    // trigger angular input (this[0] is the DOM object)
    ng.element(this[0]).triggerHandler('input');

    // return the original result
    return result; 
  }
})(window.jQuery, window.angular);

बस इस स्क्रिप्ट को jQuery और angular.js के बाद पॉप करें और val(value)अपडेट अब अच्छा खेलना चाहिए।

---

न्यूनतम संस्करण:

!function(n,t){"use strict";var r=n.fn.val;n.fn.val=function(n){if(!arguments.length)return r.call(this);var e=r.call(this,n);return t.element(this[0]).triggerHandler("input"),e}}(window.jQuery,window.angular);

---

उदाहरण:

// the function
(function($, ng) {
  'use strict';
  
  var $val = $.fn.val;
  
  $.fn.val = function (value) {
    if (!arguments.length) {
      return $val.call(this);
    }
    
    var result = $val.call(this, value);
    
    ng.element(this[0]).triggerHandler('input');
    
    return result;
    
  }
})(window.jQuery, window.angular);

(function(ng){ 
  ng.module('example', [])
    .controller('ExampleController', function($scope) {
      $scope.output = "output";
      
      $scope.change = function() {
        $scope.output = "" + $scope.input;
      }
    });
})(window.angular);

(function($){  
  $(function() {
    var button = $('#button');
  
    if (button.length)
      console.log('hello, button');
    
    button.click(function() {
      var input = $('#input');
      
      var value = parseInt(input.val());
      value = isNaN(value) ? 0 : value;
      
      input.val(value + 1);
    });
  });
})(window.jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="example" ng-controller="ExampleController">
  <input type="number" id="input" ng-model="input" ng-change="change()" />
  <span>{{output}}</span>
  <button id="button">+</button>
</div>

---

इस उत्तर को मेरे उत्तर से एक अन्य समान प्रश्न पर शब्दशः कॉपी किया गया था ।

Answer 10

महज प्रयोग करें:

$('#selectedDueDate').val(dateText).trigger('input');

के बजाय:

$('#selectedDueDate').val(dateText);