Cập nhật mô hình góc sau khi đặt giá trị đầu vào với jQuery

Tôi có kịch bản đơn giản này:

Phần tử đầu vào có giá trị được thay đổi bằng phương thức val () của jQuery.

Tôi đang cố gắng cập nhật mô hình góc với giá trị mà jQuery đặt. Tôi đã cố gắng viết một chỉ thị đơn giản, nhưng nó không làm những gì tôi muốn.

Đây là chỉ thị:

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

đây là phần jQuery:

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

và html:

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

<button>clickme</button>

Đây là câu đố với sự cố gắng của tôi:
http://jsfiddle.net/U3pVM/743/

Có thể ai đó xin vui lòng chỉ cho tôi đi đúng hướng?

ngModel lắng nghe sự kiện "đầu vào", vì vậy để "sửa" mã của bạn, bạn cần kích hoạt sự kiện đó sau khi đặt giá trị:

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

Để biết giải thích về hành vi cụ thể này, hãy xem câu trả lời mà tôi đã đưa ra trước đây: " AngularJS nội bộ nắm bắt các sự kiện như 'onclick', 'onchange' như thế nào? "

Nhưng thật không may, đây không phải là vấn đề duy nhất bạn có. Như đã chỉ ra với các bình luận bài viết khác, cách tiếp cận tập trung vào jQuery của bạn hoàn toàn sai. Để biết thêm thông tin, hãy xem bài đăng này: Tôi nghĩ thế nào về AngularJS ném nếu tôi có nền jQuery? ).

Hy vọng điều này là hữu ích cho một ai đó.

Tôi đã không thể có được jQuery('#myInputElement').trigger('input')sự kiện để được chọn ứng dụng góc cạnh của tôi.

Tôi đã tuy nhiên, có thể angular.element(jQuery('#myInputElement')).triggerHandler('input')được nhận lên.

Câu trả lời được chấp nhận là inputsự kiện kích hoạt với jQuery không hoạt động với tôi. Tạo một sự kiện và gửi bằng JavaScript gốc đã thực hiện thủ thuật này.

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

Tôi không nghĩ jQuery là bắt buộc ở đây.

Bạn có thể sử dụng $ watch và ng-click thay thế

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

Trong bộ điều khiển của bạn:

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

Bạn phải sử dụng mã sau đây để cập nhật phạm vi của mô hình đầu vào cụ thể như sau

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

Tôi đã thực hiện sửa đổi chỉ khởi tạo bộ điều khiển bằng cách thêm trình nghe trên nút hành động:

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

Các giải pháp khác không hoạt động trong trường hợp của tôi.

Tôi biết rằng hơi muộn để trả lời ở đây nhưng có lẽ tôi có thể tiết kiệm một số ngày.

Tôi đã được xử lý cùng một vấn đề. Một mô hình sẽ không được đưa vào khi bạn cập nhật giá trị đầu vào từ jQuery. Tôi đã thử sử dụng các sự kiện kích hoạt nhưng không có kết quả.

Đây là những gì tôi đã làm có thể tiết kiệm ngày của bạn.

Khai báo một biến trong thẻ script của bạn trong HTML.

Giống:

<script>
 var inputValue="";

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

</script>

Một khi bạn đã làm điều đó bằng cách sử dụng dịch vụ dưới đây của góc.

$ cửa sổ

Bây giờ bên dưới hàm getData được gọi từ cùng một phạm vi điều khiển sẽ cung cấp cho bạn giá trị bạn muốn.

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

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

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

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à angular.js và các val(value)bản cập nhật sẽ chơi tốt.

Phiên bản rút gọn:

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

Nếu bạn đang sử dụng IE, bạn phải sử dụng: input.trigger ("thay đổi");

thêm .change()sau khi thiết lập giá trị.

thí dụ:('id').val.('value').change();

cũng đừng quên thêm onchangehoặc ng-changegắn thẻ trong html

Tôi đã làm điều này để có thể cập nhật giá trị của ngModel từ bên ngoài với Vanilla / jQuery:

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