在 angular ng-model 中更新 HTML 输入值变化

Question

我有一些 ng-model 输入元素可以更新非 angularJS 函数，例如 jquery 或有时通过纯 javascript DOM api。 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>

我也将代码保存在 plunker 中 http://plnkr.co/edit/4OSW2ENIHJPUph9NANVI?p=preview

Answer 1

如果输入发生某种变化而不会触发更新到 999，您需要执行以下操作：

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

     },5000)
   }]);

您不需要在 angular 中使用任何类似 document.getElement(s).... 的东西。只需在 $scope.val

上设置一个新值

这是更正后的 Plunker：http://plnkr.co/edit/fWxMeNcJFtQreMKZaB5H?p=preview

Answer 2

您可以手动设置将强制更新的表单元素的viewValue。

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

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

查看更新后的 plunkr。

Answer 3

更新 $scope 而不是 DOM 元素。

$scope.val = 999;

Answer 4

你可以通过

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

在 angular ng-model 中更新 HTML 输入值变化

Update HTML input value changes in angular ng-model

javascript

angularjs

angularjs-scope

angular-ngmodel

angularjs-ng-model