Обновить угловую модель после установки входного значения с помощью jQuery

надеюсь, что это полезно для кого-то.

Я не смог получить jQuery('#myInputElement').trigger('input') событие, которое будет подобрано мое угловое приложение.

Я был, однако, в состоянии получить angular.element(jQuery('#myInputElement')).triggerHandler('input'), чтобы забрать.

Я не думаю, что здесь требуется jQuery.

можно использовать $ watch и ng-click вместо

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

вы должны использовать следующий код для обновления области конкретной входной модели следующим образом

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

принятый ответ, который запускал input событие с jQuery не работает для меня. Создание события и диспетчеризация с помощью собственного JavaScript сделали свое дело.

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

Я внес изменения только при инициализации контроллера, добавив прослушиватель на кнопку действия:

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

другие решения не работают в моем случае.

Я знаю, что это немного поздно, чтобы ответить здесь, но, возможно, я могу спасти некоторые один раз в день.

Я имею дело с той же проблемой. Модель не будет заполняться после обновления значения ввода из jQuery. Я попытался использовать триггерные события, но без результата.

вот что я сделал, что может спасти ваш день.

объявите переменную в теге скрипта в HTML.

Как:

<script>
 var inputValue="";

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

</script>

после того как вы сделали это с помощью сервисного из угловых.

$ window

теперь ниже getData функция, вызванная из той же области контроллера даст вам значение, которое вы хотите.

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

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

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

Я написал этот маленький плагин для 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>

Если вы используете IE, вы должны использовать: input.триггер ("изменение");

добавить .change() после установки значения.

пример:('id').val.('value').change();

также не забудьте добавить onchange или ng-change тег в html