AngularJS: การผูกแบบ ng-model ไม่อัปเดตเมื่อเปลี่ยนแปลงด้วย jQuery

นี่คือ HTML ของฉัน:

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

เมื่อฉันพิมพ์ลงในช่องโมเดลจะได้รับการอัปเดตผ่านกลไกการผูก 2 ทาง หวาน.

อย่างไรก็ตามเมื่อฉันทำสิ่งนี้ผ่าน JQuery ...

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

มันไม่อัพเดตโมเดล ทำไม?

Angular ไม่รู้เกี่ยวกับการเปลี่ยนแปลงนั้น สำหรับสิ่งนี้คุณควรโทร$scope.$digest()หรือทำการเปลี่ยนแปลงภายในของ$scope.$apply():

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

ดูสิ่งนี้เพื่อทำความเข้าใจการตรวจสอบความสกปรกให้ดีขึ้น

UPDATE : นี่คือตัวอย่าง

เพียงใช้;

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

ฉันพบว่าหากคุณไม่ใส่ตัวแปรตรงกับขอบเขตมันจะอัปเดตได้อย่างน่าเชื่อถือมากขึ้น

ลองใช้ "dateObj.selectedDate" และในตัวควบคุมเพิ่ม selectedDate ไปยังออบเจ็กต์ dateObj ดังนี้:

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

สิ่งนี้ได้ผลสำหรับฉัน

ลองทำตามนี้

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

เพียงแค่เรียกใช้บรรทัดต่อไปนี้ที่ท้ายฟังก์ชันของคุณ:

$ ขอบเขต $ ใช้ ()

ไม่ว่าจะเกิดอะไรขึ้นนอกขอบเขตของ Angular Angular จะไม่มีทางรู้เลย

วงจรไดเจสต์ทำการเปลี่ยนแปลงจากโมเดล -> คอนโทรลเลอร์และจากคอนโทรลเลอร์ -> โมเดล

หากคุณต้องการดู Model ล่าสุดคุณต้องทริกเกอร์วงจรการย่อย

แต่มีโอกาสที่วงจรการย่อยกำลังดำเนินอยู่ดังนั้นเราจำเป็นต้องตรวจสอบและเริ่มต้นวงจร

ควรใช้อย่างปลอดภัยเสมอ

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

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>

คุณต้องทริกเกอร์เหตุการณ์การเปลี่ยนแปลงขององค์ประกอบอินพุตเนื่องจาก ng-model รับฟังเหตุการณ์อินพุตและขอบเขตจะได้รับการอัปเดต อย่างไรก็ตามทริกเกอร์ jQuery ปกติไม่ได้ผลสำหรับฉัน แต่นี่คือสิ่งที่ใช้งานได้เหมือนมีเสน่ห์

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

การติดตามไม่ได้ผล

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

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับการสร้างและการฝึกอบรมเหตุการณ์สังเคราะห์

ฉันได้เขียนปลั๊กอินเล็ก ๆ นี้สำหรับ 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>

คำตอบนี้ถูกคัดลอกคำต่อคำจากคำตอบของฉันคำถามอื่นที่คล้ายกัน

เพียงใช้:

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

แทน:

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