AngularJS: ng-model binding không cập nhật khi được thay đổi bằng jQuery

Đây là HTML của tôi:

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

Khi tôi nhập vào ô, mô hình được cập nhật thông qua cơ chế ràng buộc 2 chiều. Ngọt.

Tuy nhiên khi tôi thực hiện việc này thông qua JQuery ...

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

Nó không cập nhật mô hình. Tại sao?

Angular không biết về sự thay đổi đó. Đối với điều này, bạn nên gọi $scope.$digest()hoặc thực hiện thay đổi bên trong $scope.$apply():

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

Xem phần này để hiểu rõ hơn về kiểm tra bẩn

CẬP NHẬT : Đây là một ví dụ

Chỉ dùng;

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

Tôi nhận thấy rằng nếu bạn không đặt biến trực tiếp vào phạm vi mà nó cập nhật sẽ đáng tin cậy hơn.

Hãy thử sử dụng một số "dateObj.selectedDate" và trong bộ điều khiển thêm Ngày đã chọn vào đối tượng dateObj như sau:

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

Điều này đã làm việc cho tôi.

Thử cái này

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

Chỉ cần chạy dòng sau ở cuối hàm của bạn:

$ scope. $ apply ()

Bất cứ điều gì xảy ra bên ngoài Phạm vi của Angular, Angular sẽ không bao giờ biết điều đó.

Chu kỳ tiêu hóa đưa các thay đổi từ mô hình -> bộ điều khiển và sau đó từ bộ điều khiển -> mô hình.

Nếu bạn cần xem Mẫu mới nhất, bạn cần kích hoạt chu kỳ thông báo

Nhưng có khả năng một chu trình thông báo đang diễn ra, vì vậy chúng tôi cần kiểm tra và bắt đầu chu trình.

Tốt hơn là luôn luôn thực hiện một ứng dụng an toàn.

       $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 truyền chuỗi, số và boolean theo giá trị trong khi nó truyền mảng và đối tượng bằng tham chiếu. Vì vậy, bạn có thể tạo một đối tượng trống và làm cho ngày của bạn trở thành thuộc tính của đối tượng đó. Theo cách đó, góc sẽ phát hiện những thay đổi của mô hình.

Trong bộ điều khiển

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

Trong html

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

Bạn phải kích hoạt sự kiện thay đổi của phần tử đầu vào vì ng-model lắng nghe các sự kiện đầu vào và phạm vi sẽ được cập nhật. Tuy nhiên, trình kích hoạt jQuery thông thường không hoạt động với tôi. Nhưng đây là thứ hoạt động như một sự quyến rũ

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

Theo dõi không hoạt động

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

Bạn có thể đọc thêm về cách tạo và điều phối các sự kiện tổng hợp .

Tôi đã viết plugin nhỏ này cho jQuery, nó sẽ thực hiện tất cả các lệnh gọi .val(value)cập nhật phần tử góc nếu có:

(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);

Chỉ cần đưa tập lệnh này vào sau jQuery và angle.js và các val(value)bản cập nhật giờ sẽ hoạt động tốt.

Phiên bản thu nhỏ:

!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);

Thí dụ:

// 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>

Câu trả lời này đã được sao chép nguyên văn từ câu trả lời của tôi cho một câu hỏi tương tự khác .

Chỉ dùng:

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

thay vì:

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