为什么输入字段更改不会更新角度模型？

Question

这是一个非常新手的问题，但为什么不呢？

    document.getElementById("demo").value 

更新角度模型？它会更新输入字段，但只有在手动将某些内容放入该字段后才会更新模型。

这是代码：

<div ng-controller="AddCtrl">
  <input type="text" id="demo" ng-model="test.fld" ng-change="change()"></input>
  <br />

  [ <a href="" onclick="somefnc()">pop</a> ] 
  [ <a href="" ng-click="add(test)">add</a> ]       
  <p>Test-field: {{test.fld}}</p>
</div>



<script>
  function somefnc() {
    document.getElementById("demo").value = "hi";  
  }
</script>

Answer 1

答案纯粹与 Angular 绑定数据的方式有关。最简单的答案是，手动更改表单数据后，必须为元素的范围调用 $scope.$apply() 。在“Angular 世界”之外调用，您可以将 somefnc 更改为：

function somefnc() {
    document.getElementById("demo").value = "hi";
    $('#demo').scope().$apply();  
}

最佳实践表明，任何直接的 dom 操作都应该只发生在指令中。理想情况下，您可以在控制器中更改此值，如下所示：

$scope.somefnc = function(){
    test.fld = "hi";
}

像这样通过角度范围完成的任何事情都不需要 $scope.$apply，只有直接 dom 操作才需要。

完整的例子在这里

<div ng-controller="AddCtrl">
  <input type="text" id="demo" ng-model="test.fld" ng-change="change()"></input>
  <br />

  [ <a href="" ng-click="somefnc()">pop</a> ] 
  [ <a href="" ng-click="add(test)">add</a> ]       
  <p>Test-field: {{test.fld}}</p>
</div>



<script>
angular.module('app').controller('AddCtrl',['$scope',function($scope){
    $scope/test = {fld: ''};
    $scope.add = function(){
        $scope.test.fld += test.fld
    }
    $scope.change = function(){
        alert('I changed!');
    }
    $scope.somefnc = function() {
        $scope.test.fld = "hi";  
    }
}])
</script>