অ্যাঙ্গুলারজেএস: এনজি-মডেল বন্ডিং যখন jQuery এর সাথে পরিবর্তিত হবে তখন আপডেট হচ্ছে না

Question 1

এটি আমার এইচটিএমএল:

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

আমি যখন বাক্সে টাইপ করি তখন মডেলটি 2-উপায়-বন্ধন ব্যবস্থার মাধ্যমে আপডেট করা হয়। মিষ্টি।

তবে আমি যখন জিকুয়েরির মাধ্যমে এটি করি ...

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

এটি মডেলটি আপডেট করে না। কেন?

Question 2

কৌনিকটি সেই পরিবর্তন সম্পর্কে জানে না। এর জন্য আপনার কল করা উচিত $scope.$digest()বা এর ভিতরে পরিবর্তন করা উচিত $scope.$apply():

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

দেখুন এই ভালভাবে বুঝতে মলিন-পরীক্ষণ

আপডেট : এখানে একটি উদাহরণ

Question 3

শুধু ব্যবহার;

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

Question 4

আমি খুঁজে পেয়েছি যে আপনি যদি পরিবর্তনটি সরাসরি স্কোপের বিপরীতে না রাখেন তবে এটি আরও নির্ভরযোগ্যভাবে আপডেট হয়।

কিছু "তারিখবজ.স্লেজডেট" ব্যবহার করার চেষ্টা করুন এবং নিয়ামকটিতে নির্বাচিত তারিখটিকে একটি ডেটঅবজ অবজেক্টে যুক্ত করুন:

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

এটি আমার পক্ষে কাজ করেছে।

Question 5

এটা চেষ্টা কর

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

Question 6

আপনার ফাংশন শেষে কেবল নিম্নলিখিত লাইনটি চালান:

$ সুযোগ। $ প্রয়োগ ()

Question 7

কৌণিক স্কোপের বাইরে যা কিছু ঘটে না কেন, কৌনিকটি কখনই তা জানতে পারে না।

ডাইজেস্ট চক্রটি মডেল -> নিয়ামক এবং তারপরে নিয়ামক -> মডেল থেকে পরিবর্তনগুলি রাখে।

আপনি যদি সর্বশেষতম মডেলটি দেখতে চান তবে আপনার ডাইজেস্ট চক্রটি ট্রিগার করতে হবে

তবে একটি ডাইজেস্ট চক্রের অগ্রগতি হওয়ার সম্ভাবনা রয়েছে, তাই আমাদের চক্রটি পরীক্ষা করা এবং সূচনা করা দরকার।

সাধারণত, সর্বদা একটি নিরাপদ প্রয়োগ করুন।

       $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.
      });

Question 8

কৌণিক জেএস স্ট্রিং, সংখ্যা এবং বুলিয়ানগুলি মান দ্বারা পাস করে যখন এটি অ্যারে এবং অবজেক্টগুলিকে রেফারেন্স দিয়ে পাস করে। সুতরাং আপনি একটি খালি অবজেক্ট তৈরি করতে এবং আপনার তারিখটিকে সেই অবজেক্টের সম্পত্তি হিসাবে তৈরি করতে পারেন। এই ভাবে কৌণিক মডেল পরিবর্তনগুলি সনাক্ত করবে।

নিয়ামক মধ্যে

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

এইচটিএমএলে

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

Question 9

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

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

অনুসরণ কাজ করে না

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

সিন্থেটিক ইভেন্টগুলি তৈরি এবং প্রেরণ সম্পর্কে আপনি আরও পড়তে পারেন ।

Question 10

আমি এই ছোট প্লাগইনটি 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 এবং কৌণিক.জেএস পরে পপ করুন এবং 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>

স্নিপেট প্রসারিত করুন

এই উত্তরটি একই অনুরূপ প্রশ্নের আমার উত্তর থেকে কপিরাইট করা হয়েছিল ।

Question 11

শুধু ব্যবহার করুন:

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

পরিবর্তে:

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