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

У меня такой простой сценарий:

Элемент ввода, значение которого изменяется с помощью метода val () jQuery.

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

Вот директива:

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

это часть jQuery:

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

и html:

 
{{foo}}

Вот скрипка с моей попыткой:
http://jsfiddle.net/U3pVM/743/

Может ли кто-нибудь указать мне в правильном направлении?

    ngModel прослушивает событие «ввода», поэтому для «исправления» вашего кода вам необходимо запустить это событие после установки значения:

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

    Для объяснения этого конкретного поведения проверьте этот ответ, который я дал некоторое время назад: « Как AngularJS внутренне захватывает такие события, как« onclick »,« onchange »? »


    Но, к сожалению, это не единственная проблема, которая у вас есть. Как отмечалось в других комментариях к сообщениям, ваш подход, ориентированный на jQuery, совершенно неправильный. Для получения дополнительной информации см. Этот пост: Как я могу «думать в AngularJS», если у меня есть фон jQuery? ).

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

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

    Тем не менее, я смог получить angular.element(jQuery('#myInputElement')).triggerHandler('input') который нужно подобрать.

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

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

     
    {{foo}}

    В вашем controllerе:

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

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

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

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

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

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

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

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

    Подобно:

      

    Как только вы это сделали, используя нижнюю службу углового.

    $ окно

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

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

    Если вы используете IE, вам нужно использовать: input.trigger («change»);

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

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

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

    Interesting Posts

    Как узнать, поддерживает ли мой BIOS UEFI?

    Лучший способ сохранить критерии Значка?

    Ярлык клавиатуры для переключения между листами в Excel

    Инициализация двумерного std :: vector

    Как проверить, является ли вход действительным целым без каких-либо других символов?

    Значение различных символов в .aspx-странице asp.net

    Какой самый простой способ удалить Vim swapfiles, с которым я уже справился?

    событие Действие против события EventHandler

    Как использовать sed для замены только первого вхождения в файл?

    Правила фильтра JqGrid. Можем ли мы фильтровать на основе массива?

    Ошибка в компиляторе eclipse или в javac («параметры типа T не могут быть определены»)

    Как восстановить зашифрованные файлы после переустановки Windows XP?

    Как переключаться между двумя последними окнами в tmux?

    Google Chrome не сохраняет пароли (а не автоматически заполняет существующие логины / пароли)

    Как я могу использовать сортировщик слайдов PowerPoint на экране моего ноутбука и полноэкранный слайд на проекторе?

    Давайте будем гением компьютера.