Обновить изменения входного значения HTML в угловой ng-модели

У меня есть некоторые входные элементы ng-модели, которые обновляются функциями, отличными от angularJS, такими как jquery или иногда с помощью чистого javascript DOM apis. Значение элемента ввода html изменяется, однако переменная области видимости модели не обновляется. Есть ли способ заставить angular обрабатывать эти обновления?

app.js
По истечении 5 секунд значение 1 изменяется на 999. Это отражено в html, но не в $scope.val.

 angular.module('inputExample', [])
   .controller('ExampleController', ['$scope', '$timeout',function($scope,$timeout) {
     $scope.val = '1';
     $timeout(function(){
       document.getElementById("myid").value = 999;

     },5000)
   }]);

html

<form name="testForm" ng-controller="ExampleController">
  <input id="myid" ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input"
         aria-describedby="inputDescription" />
         <div>
           {{val}}
         </div>
</form>

Я также сохранил код в плункере http://plnkr.co/edit/4OSW2ENIHJPUph9NANVI?p=preview


javascript angularjs angular-ngmodel angularjs-ng-model angularjs-scope
person manikawnth    schedule 29.03.2016    source источник
comment
Вы можете захотеть инициировать событие ввода из элемента ввода после изменения значения. Не уверен, но это может обновить angular с последним значением.   -  person HankScorpio    schedule 29.03.2016

Ответы (4)


arrow_upward
0
arrow_downward

Вы можете достичь этого,

$timeout(function(){
       document.getElementById("myid").value = 999;
       angular.element(document.getElementById("myid")).triggerHandler('change');
     },5000)

Однако лучшим подходом было бы непосредственное обновление области действия,

 $timeout(function(){
           angular.element(document.getElementById("myid")).scope().val = 999;
         },5000)
person Low Flying Pelican    schedule 29.03.2016

arrow_upward
1
arrow_downward

Не запуская обновление до 999 при каком-либо изменении ввода, вам нужно сделать следующее:

 angular.module('inputExample', [])
   .controller('ExampleController', ['$scope', '$timeout',function($scope,$timeout) {
     $scope.val = '1';
     $timeout(function(){
       $scope.val = 999;

     },5000)
   }]);

вам не нужно использовать что-либо вроде document.getElement(s).... в angular. Просто установите новое значение для $scope.val

Вот исправленный плункер: http://plnkr.co/edit/fWxMeNcJFtQreMKZaB5H?p=preview

person omarjmh    schedule 29.03.2016

arrow_upward
1
arrow_downward

Обновите $scope, а не элемент DOM.

$scope.val = 999;

person shmuli    schedule 29.03.2016

arrow_upward
0
arrow_downward

Вы можете вручную установить viewValue элемента формы, что приведет к принудительному обновлению.

$timeout(function(){
   var ele = document.getElementById("myid");
   ele.value = 999;

   $scope.testForm.anim.$setViewValue(ele.value);
 },5000);

См. обновленный plunkr.

person David L    schedule 29.03.2016