Ввод с использованием ng-модели не привязывается, когда текстовое поле заполняется с помощью javascript

У меня есть текстовое поле, которое заполняется с помощью javascript, который получает данные, читая QR-код и устанавливая значение. Я использую ng-model для привязки к переменной в моем контроллере, который отлично работает, когда я вручную ввожу текст в текстовое поле, но не тогда, когда он заполнен javascript. Я предполагаю, что есть какое-то событие, которое я должен запустить вручную, чтобы вызвать ng-модель, чтобы сделать это волшебство, но я не знаю, что это за событие и является ли это правильным подходом. Мой ввод выглядит так:

<input type="text" id="read" name="itemId" class="form-control center-block" placeholder="Item Id" ng-model="scannedId"/>

Я устанавливаю значение следующим образом, когда javascript для чтения QR-кода делает свое дело и работает:

$('#read').val(data);

Я пробовал следующее, чтобы попытаться вручную вызвать событие, которое, как я надеялся, ng-model будет прослушивать сразу после назначения val(data), но оба терпят неудачу:

$('#read').trigger('input');
and
angular.element($('#reader')).triggerHandler('onChange');

Все работает нормально, если я набираю его вручную, но не при обновлении с помощью javascript. Заранее спасибо!


person Animal Style    schedule 01.01.2015    source источник


Ответы (2)


Установите значение модели внутри вашего контроллера. Не используйте jQuery.

Внутри вашего контроллера создайте объект: $scope.myModel = {};

Затем измените свой ng-model="myModel.scannedId"

Затем внутри вашего контроллера вы можете установить модель $scope.myModel.scannedId = data, и она будет автоматически привязана.

Урок в том, что... Не пытайтесь явно установить «значение» с помощью jQuery, особенно если у вас есть директива ngModel. Каким-то образом Angular переопределяет это, даже если вы видите, что атрибут «значение» изменился.

person daleyjem    schedule 01.01.2015
comment
Код, используемый для чтения QR-кода, представляет собой стороннюю библиотеку, в которую я передаю функцию для установки значения, определенного ($('#read').val(data);). Поэтому, если я не смогу каким-то образом передать метод контроллера сторонним js, я не смогу установить значение в контроллере. Я надеялся, что смогу запустить какое-то событие на входе, которое вызовет привязку ng-model. - person Animal Style; 02.01.2015
comment
что такое сторонняя библиотека? - person daleyjem; 02.01.2015
comment
Я использовал этот github.com/dwa012/html5-qrcode и внес в него некоторые изменения. Это оболочка вокруг github.com/LazarSoft/jsqrcode для потоковой передачи видео с интервалами. - person Animal Style; 02.01.2015
comment
Что вызывает вызов считывателя qrcode? Это при загрузке файла? Вы вставляете тег <img> в <div> перед его вызовом? - person daleyjem; 02.01.2015
comment
Он производит выборку видеокамеры с интервалом и передает это изображение, как в образце проекта html5-qrcode. Вход заполняется очень хорошо, я думаю, что он просто передает какое-то событие, которое вызывает ввод триггеров ввода. Я обновляю вопрос, чтобы показать мои неудачные попытки запуска событий вручную. - person Animal Style; 02.01.2015
comment
Взгляните на этот планкр: plnkr.co/edit/6bayLaFqZv58CqKKklbF?p=preview По сути, я создал директиву, которая принимает параметр «обратный вызов». Сторонний плагин инициализируется директивой qrcode и отправляет любые данные в эту функцию «обратного вызова» в вашем контроллере. Затем модель обновляется. - person daleyjem; 02.01.2015
comment
Кстати... Убедитесь, что вы разрешили доступ к вашей камере. Демо должно читаться как «foo bar». - person daleyjem; 02.01.2015
comment
Я не мог заставить ваш плункер что-либо делать, но кода было достаточно, чтобы указать мне правильное направление, и с кучей возни с моим кодом он заработал, используя директиву, как вы предложили. Спасибо за ваше время и помощь! - person Animal Style; 02.01.2015

Когда вы находитесь вне среды AngularJS, вам нужно вручную запустить DigestCycle... Итак, попробуйте что-то вроде этого:

var scope = $('#read').scope(); scope.apply(function() {scope.scannedId = 'new value outside AngularJS LifeCycle'; });
person Hitmands    schedule 29.10.2015
comment
Вы можете создать плункер для меня? - person Aravind; 05.01.2017