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

答案纯粹与角度绑定数据的方式有关。最简单的答案是，在手动更改表单数据后，必须为元素的范围调用$ scope。$ apply（）。在“角度世界”之外调用你可以将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>

Answer 2

因为AngularJS只能观察AngularJS的范围中的模型更改。因此，如果您希望双向数据绑定能够神奇地工作，则需要使用Angular的方式进行修改而不是像jQuery这样的其他方式。

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

2 个答案: