У меня есть этот простой сценарий:
Входной элемент, значение которого изменяется методом 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:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<input test-change ng-model="foo" />
<span>{{foo}}</span>
</div>
</div>
<button>clickme</button>
Вот скрипка с моей попыткой:
http://jsfiddle.net/U3pVM/743/
Может кто-нибудь, пожалуйста, укажите мне в правильном направлении?
Ответы:
ngModel прослушивает событие «input», поэтому, чтобы «исправить» ваш код, вам нужно вызвать это событие после установки значения:
Для объяснения этого конкретного поведения проверьте ответ, который я дал некоторое время назад: « Как AngularJS внутренне перехватывает такие события, как« onclick »,« onchange »? »
Но, к сожалению, это не единственная проблема, которая у вас есть. Как указано в других комментариях к публикации, ваш jQuery-ориентированный подход совершенно неверен. Для получения дополнительной информации взгляните на этот пост: как мне «думать в AngularJS», если у меня есть jQuery фон? ).
источник
input
событие не работает в IE, включая IE11.input
событие работает только тогда, когда$sniff.hasEvent('input')
верно, но$sniff.hasEvent('input')
ложно даже в IE11! Мы можем использоватьchange
событие вместоНадеюсь, это кому-нибудь пригодится.
Я не смог получить
jQuery('#myInputElement').trigger('input')
событие, чтобы забрать мое угловое приложение.Однако я был в состоянии получить,
angular.element(jQuery('#myInputElement')).triggerHandler('input')
чтобы меня забрали.источник
angular.element($('#myInputElement')).triggerHandler('input')
Принятый ответ, инициировавший
input
событие с помощью jQuery, у меня не сработал. Создание события и диспетчеризация с нативным JavaScript сделали свое дело.источник
Я не думаю, что здесь требуется jQuery.
Вместо этого вы можете использовать $ watch и ng-click
В вашем контроллере:
источник
Вы должны использовать следующий код, чтобы обновить область действия конкретной модели ввода следующим образом
источник
var scope = angular.element($("select")).scope(); scope.$apply(function(){ scope.selectValue = newVal; });
эта часть мне очень помогла. Моя проблема заключалась в обновлении угловой модели после вызова jjery ajax в функции успеха. Это было медленно с $ http, потому что там был дубликат слушателя события изменения для элемента, который делал что-то еще, поэтому я слил его в jQuery.$compileProvider.debugInfoEnabled(false);
или$logProvider.debugEnabled(false);
см. Code.angularjs.org/1.4.0/docs/guide/production для получения дополнительной информации.Я внес изменения только в инициализацию контроллера, добавив слушателя на кнопку действия:
Другие решения не работали в моем случае.
источник
Я знаю, что здесь уже поздно отвечать, но, возможно, я смогу сэкономить один раз.
Я имел дело с той же проблемой. Модель не будет заполняться после обновления значения ввода из jQuery. Я пытался использовать триггерные события, но безрезультатно.
Вот что я сделал, чтобы спасти твой день.
Объявите переменную в вашем теге скрипта в HTML.
Подобно:
Однажды вы сделали это, используя нижеприведенный сервис angular.
Теперь ниже функция getData, вызываемая из той же области видимости контроллера, даст вам желаемое значение.
источник
Я написал этот небольшой плагин для jQuery, который будет делать все вызовы для
.val(value)
обновления углового элемента, если он присутствует:Просто вставьте этот скрипт после jQuery и angular.js, и
val(value)
обновления теперь должны играть хорошо.Минимизированная версия:
Пример:
Показать фрагмент кода
источник
Если вы используете IE, вы должны использовать: input.trigger ("change");
источник
добавить
.change()
после установки значения.пример:
('id').val.('value').change();
Также не забудьте добавить
onchange
илиng-change
пометить в HTMLисточник
Я сделал это, чтобы иметь возможность обновить значение ngModel извне с помощью Vanilla / jQuery:
источник