javascript - formularios - Actualizar los cambios en el valor de entrada HTML en angular ng-model

ng-value

Question

Tengo algunos elementos de entrada ng-model que se actualiza con funciones no angularesJS como jquery o, a veces, mediante APIs puras javascript DOM. El valor en el elemento de entrada html cambia, sin embargo, la variable del alcance del modelo no se actualiza. ¿Hay alguna manera de forzar angular para procesar estas actualizaciones

app.js
Después de un tiempo de espera de 5 segundos, el valor 1 se cambia a 999. Esto se refleja en html pero no en $ 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>

También guardé el código en plunker http://plnkr.co/edit/4OSW2ENIHJPUph9NANVI?p=preview

Answer 1

Actualice el $scope lugar del elemento DOM.

$scope.val = 999;

Answer 2

Puede establecer manualmente viewValue del elemento de formulario que forzará la actualización.

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

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

Ver el plunkr actualizado.

Answer 3

Puedes lograr esto por,

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

Sin embargo, el mejor enfoque sería actualizar directamente el alcance,

 $timeout(function(){
           angular.element(document.getElementById("myid")).scope().val = 999;
         },5000)

Answer 4

Sin activar la actualización a 999 en algún tipo de cambio en la entrada, debe hacer esto:

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

     },5000)
   }]);

no necesita usar nada como document.getElement (s) .... en angular. Simplemente establece un nuevo valor en $scope.val

Aquí está el Plunker corregido: http://plnkr.co/edit/fWxMeNcJFtQreMKZaB5H?p=preview