JQuery के साथ इनपुट मान सेट करने के बाद कोणीय मॉडल अपडेट करें

Question

मेरे पास यह सरल परिदृश्य है:

इनपुट तत्व जो मान jQuery के वैल () विधि द्वारा बदल दिया जाता है।

मैं jQuery सेट मान के साथ कोणीय मॉडल को अपडेट करने की कोशिश कर रहा हूं। मैंने एक साधारण निर्देश लिखने की कोशिश की, लेकिन यह वह नहीं कर रहा जो मैं चाहता हूं।

यहाँ निर्देश है:

var myApp = angular.module('myApp', []);
myApp.directive('testChange', function() {
    return function(scope, element, attrs) {        
        element.bind('change', function() {
            console.log('value changed');
        })
    }
})

यह jQuery का हिस्सा है:

$(function(){
    $('button').click(function(){
        $('input').val('xxx');
    })
})

और HTML:

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <input test-change ng-model="foo" />
        <span>{{foo}}</span>
    </div>
</div>

<button>clickme</button>

यहाँ मेरी कोशिश के साथ बेला है:
http://jsfiddle.net/U3pVM/743/

क्या कोई कृपया मुझे सही दिशा में अंकित कर सकता है?

Comments

मिक्स AngularJS और jQuery, निर्देशों के बाहर, अक्सर एक बुरा विचार है। क्या आप जो करना चाहते हैं उसके लिए jQuery अनिवार्य है?

— ब्लैकहोल

आप मॉडल के मूल्य को बदलने के लिए नियंत्रक में एक फ़ंक्शन को कोणीय के साथ क्लिक इवेंट सेट क्यों नहीं करते हैं?

— जिमी केन

@ ब्लेकहोल, मैं jquery अपलोड प्लगइन का उपयोग कर रहा हूं जो अपना काम करता है और अपलोड किए गए फ़ाइल में छिपे इनपुट में पथ डालता है। मुझे केवल कोणीय मॉडल में उस पथ तक पहुंच की आवश्यकता है। इसलिए मैंने सोचा कि मैं इसे छिपे हुए इनपुट के मूल्य के रूप में सेट करूँगा और इसे बदलने के बाद कोणीय मॉडल को अपडेट कर दूंगा।

— मिशाल जे।

मुझे आपके फ़ील्ड में Jquery कॉल नहीं दिखाई देती है ... क्या आप चेक कर सकते हैं और इंगित कर सकते हैं कि आप JQ के साथ मान कहाँ बदलते हैं?

— वेलेन्टाइन श्योबोनोव

आपका फिडल एक टोडो नमूना ऐप से लिंक करता है, जो इस प्रश्न से संबंधित नहीं है।

— स्टीवे

Answer 1

ngModel "इनपुट" ईवेंट के लिए सुनता है, इसलिए आपके कोड को "ठीक" करने के लिए आपको मूल्य सेट करने के बाद उस ईवेंट को ट्रिगर करना होगा:

$('button').click(function(){
    var input = $('input');
    input.val('xxx');
    input.trigger('input'); // Use for Chrome/Firefox/Edge
    input.trigger('change'); // Use for Chrome/Firefox/Edge + IE11
});

इस विशेष व्यवहार की व्याख्या के लिए इस उत्तर की जांच करें जो मैंने कुछ समय पहले दिया था: " एंगुलरजेएस आंतरिक रूप से 'ऑनक्लिक', 'ऑन्चेंज' जैसी घटनाओं को कैसे पकड़ता है? "

---

लेकिन दुर्भाग्य से, यह एकमात्र समस्या नहीं है जो आपके पास है। जैसा कि अन्य पोस्ट टिप्पणियों के साथ बताया गया है, आपका jQuery- केंद्रित दृष्टिकोण सादा गलत है। अधिक जानकारी के लिए इस पोस्ट पर एक नज़र डालें: अगर मुझे jQuery पृष्ठभूमि है तो मैं "AngularJS में कैसे सोचूं"? )।

Comments

ठंडा! एक अपवाद के साथ: यह छिपे हुए इनपुट पर काम क्यों नहीं करता है? जब मैं अपने इनपुट प्रकार को पाठ पर स्विच करता हूं, तो यह अपेक्षित रूप से काम करता है।

— करोल

Jquery कैलेंडर प्लग इन का उपयोग करते समय यह एक प्रमुख समस्या हल हो गई। इनपुट के बाद ('इनपुट') ट्रिगर करने के लिए प्लगइन को हैक करके। इनपुट () के बाद उपयोगकर्ता द्वारा कैलेंडर की तारीख का चयन करने के बाद एनजी-चेंज घटना होती है। धन्यवाद!

— ड्रोन ब्रेन

छिपे हुए इनपुट पर सही काम करता है: element.triggerHandler ("परिवर्तन");

— फाल्को

यह मेरे लिए काम नहीं करता है। $ ( "# दूरी") वैल (डेटा)। $ ( "# दूरी") ट्रिगर ( 'इनपुट')।

— Stas Svishov

कोणीय 1.4.3 के साथ, inputघटना IE पर IE IE सहित काम नहीं करता है। inputईवेंट केवल तभी काम करता है जब $sniff.hasEvent('input')यह सत्य है लेकिन $sniff.hasEvent('input')IE11 पर भी गलत है! हम इसके बजाय changeघटना का उपयोग कर सकते हैं ।

— शुही कागवा

Answer 2

आशा है कि यह किसी के लिए उपयोगी है।

मैं jQuery('#myInputElement').trigger('input')अपने कोणीय एप्लिकेशन को लेने की घटना को प्राप्त करने में असमर्थ था ।

मैं हालांकि, angular.element(jQuery('#myInputElement')).triggerHandler('input')उठा पाने में सक्षम था ।

Comments

कृपया समाधान बताएं कोड न लिखें। मुझे लगता है कि कोणीय नहीं है $ एक कार्य नहीं है

— ठाकनी थारेज

$ यहाँ jQuery का प्रतिनिधित्व करता है। यह प्रश्न में टैग किया गया है।

— गिन्मन

इसने मेरे लिए भी $ ('myInputElement') काम किया। ट्रिगर ('इनपुट') परतदार था। यह कभी-कभी बेतरतीब ढंग से काम करने लगता था, लेकिन दूसरों को नहीं और मैं कभी एक पैटर्न स्थापित नहीं कर सकता था। यह समाधान हर बार काम करता है।

— ब्रायनप

मेरा काम # उपसर्ग के साथ किया जाता है:angular.element($('#myInputElement')).triggerHandler('input')

— Ebru Yener

इस ट्रिगरहैंडलर ने मेरे लिए भी काम किया, मैं टेक्सारिया के साथ निवेश नहीं कर रहा था। धन्यवाद

— मुनीर

Answer 3

स्वीकृत उत्तर जो inputjQuery के साथ ईवेंट को ट्रिगर कर रहा था , मेरे लिए काम नहीं कर रहा था। एक घटना बनाना और देशी जावास्क्रिप्ट के साथ प्रेषण ने किया।

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

Comments

मेरे लिए भी यही समाधान था। कोणीय 1.1.5, jQuery 2.2.4 और जैस्मीन 2.5.3 का उपयोग करना। बहुत, बहुत अजीब है कि कोई अन्य ट्रिगर तंत्र काम नहीं करता है।

— लार्स-एरिक

मैं एक स्क्रिप्ट में इनपुट सेट करते समय फ़ॉर्म सत्यापन को ट्रिगर करने के लिए मूल JS विधि की तलाश कर रहा था और यह मेरे लिए काम करता है, धन्यवाद।

— फैलाने

कोणीय 5 के साथ भी काम करता है, बढ़िया!

— इगोर

धन्यवाद। विशेष रूप से webview.ev मूल्यांकनjavascript में उपयोगी है

— बेरी विंग

Answer 4

मुझे नहीं लगता कि यहां jQuery की आवश्यकता है।

आप इसके बजाय $ घड़ी और एनजी-क्लिक का उपयोग कर सकते हैं

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <input test-change ng-model="foo" />
    <span>{{foo}}</span>

    <button ng-click=" foo= 'xxx' ">click me</button>
    <!-- this changes foo value, you can also call a function from your controller -->
  </div>
</div>

आपके नियंत्रक में:

$scope.$watch('foo', function(newValue, oldValue) {
  console.log(newValue);
  console.log(oldValue);
});

Comments

शुक्रिया यूटोपिक, आप सही कह रहे हैं, मुझे कोणीय के साथ jquery का मिश्रण नहीं करना चाहिए, जब कोणीय का उपयोग करके काम करने का तरीका हो।

— मिशाल जे।

Answer 5

निम्न इनपुट मॉडल के दायरे को अद्यतन करने के लिए आपको निम्न कोड का उपयोग करना होगा

$('button').on('click', function(){
    var newVal = $(this).data('val');
    $('select').val(newVal).change();

    var scope = angular.element($("select")).scope();
    scope.$apply(function(){
        scope.selectValue = newVal;
    });
});

Comments

var scope = angular.element($("select")).scope(); scope.$apply(function(){ scope.selectValue = newVal; }); उस हिस्से ने मेरी बहुत मदद की। मेरा मुद्दा सफलता समारोह में jquery ajax कॉल के बाद एक कोणीय मॉडल को अद्यतन कर रहा था। यह $ http के साथ धीमा था क्योंकि तत्व के लिए डुप्लिकेट परिवर्तन इवेंट श्रोता था जो कुछ और कर रहा था इसलिए मैंने इसे jQuery में विलय कर दिया।

— इमैनुएल महुनी

Element.scope () का उपयोग एक बुरा विचार है, क्योंकि यह केवल लॉगिंग सक्षम के साथ काम करता है। यदि आप एक उत्पादन साइट पर हैं, तो आपको अधिक जानकारी के लिए अपने लॉगिन पर लॉगिंग कोड को देखना चाहिए $compileProvider.debugInfoEnabled(false);या code.angularjs.org/1.4.0/docs/guide/production$logProvider.debugEnabled(false); देखें ।

— RWAM

मैंने छिपे हुए चर के लिए इस विधि की कोशिश की और यह काम कर गया। var li_cuboid_id = $ ('# li_cuboid_id'); li_cuboid_id.val (json.cuboidId) .change (); var गुंजाइश = angular.element ($ ("# li_cuboid_id"))। गुंजाइश (); गुंजाइश। $ लागू (समारोह) () {गुंजाइश.cuboidId = json.cuboidId;}); छिपे हुए चर को इस रूप में परिभाषित किया गया है: <input id = "li_cuboid_id" प्रकार = छिपा हुआ एनजी-मॉडल = "घनाभ" ">

— राहुल वराडकर

Answer 6

मैंने एक्शन बटन पर श्रोता को जोड़कर केवल कंट्रोलर इनिशियलाइज़ेशन पर संशोधन किया:

$(document).on('click', '#action-button', function () {
        $timeout(function () {
             angular.element($('#input')).triggerHandler('input');
        });
});

मेरे मामले में अन्य समाधान काम नहीं किए।

Answer 7

मुझे पता है कि यहां जवाब देने में थोड़ा देर हो गई है लेकिन हो सकता है कि मैं एक दिन कुछ बचा सकूं।

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

यहाँ मैंने वही किया है जो आपका दिन बचा सकता है।

HTML में अपने स्क्रिप्ट टैग के भीतर एक चर घोषित करें।

पसंद:

<script>
 var inputValue="";

// update that variable using your jQuery function with appropriate value, you want...

</script>

एक बार जब आपने कोणीय की नीचे की सेवा का उपयोग करके किया था।

$ खिड़की

अब नीचे getData फ़ंक्शन को उसी कंट्रोलर स्कोप से बुलाया जाता है जो आपको मनचाहा मान देगा।

var myApp = angular.module('myApp', []);

app.controller('imageManagerCtrl',['$scope','$window',function($scope,$window) {

$scope.getData = function () {
    console.log("Window value " + $window.inputValue);
}}]);

Answer 8

मैंने 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>

Comments

क्षमा करें, यह खोदने के लिए, लेकिन किसी भी विचार कैसे यह / चेकबॉक्स के साथ काम कर सकता है या उन उपयोग के बाद से चयन करता है। यह इनपुट के लिए पूरी तरह से काम कर रहा है। बहुत कम से कम परिवर्तन होता है इसलिए धन्यवाद!

— ऑस्टिन

@ मुझे डर लग रहा है मुझे नहीं पता। यह दो प्रौद्योगिकियों के बारे में एक 5 साल पुराना सवाल है जो व्यापक रूप से पुराना माना जाता है, जैसे कि मैंने अपने सिर में ज्ञान नहीं रखा है। भाग्य का सबसे अच्छा समाधान आप की जरूरत है, हालांकि हो रही है।

— dav_i

Answer 9

यदि आप IE का उपयोग कर रहे हैं, तो आपको उपयोग करना होगा: input.trigger ("परिवर्तन");

Answer 10

जोड़ना .change()मान सेट करने के बाद ।

उदाहरण:('id').val.('value').change();

html में जोड़ना onchangeया ng-changeटैग करना न भूलें

Answer 11

मैंने ऐसा किया है कि वेनिला / jQuery के साथ बाहर से ngModel के मूल्य को अपडेट करने में सक्षम हो:

function getScope(fieldElement) {
    var $scope = angular.element(fieldElement).scope();
    var nameScope;
    var name = fieldElement.getAttribute('name');
    if($scope) {
        if($scope.form) {
            nameScope = $scope.form[name];
        } else if($scope[name]) {
            nameScope = $scope[name];
        }
    }
    return nameScope;
}

function setScopeValue(fieldElement, newValue) {
    var $scope = getScope(fieldElement);
    if($scope) {
        $scope.$setViewValue(newValue);
        $scope.$validate();
        $scope.$render();
    }
}

setScopeValue(document.getElementById("fieldId"), "new value");