angularjs - 为什么输入字段不更改更新 Angular 模型？

Question

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

    document.getElementById("demo").value 

更新 Angular 模型？它更新输入字段，但仅在手动将某些内容放入字段后才更新模型。

这是代码:

<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 绑定(bind)数据的方式有关。最简单的答案是，在手动更改表单数据后，必须为元素的范围调用 $scope.$apply()。在“Angular world”之外调用，您可以将 somefnc 更改为:

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

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

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

像这样通过 Angular 范围完成的任何事情都不需要 $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>