4

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

    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>
4

2 回答 2

4

答案纯粹与角度绑定数据的方式有关。最简单的答案是，在手动更改表单数据后，必须为元素的范围调用 $scope.$apply()。在“Angular world”之外调用，您可以将 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>
于 2013-08-19T02:40:32.833 回答
0

因为 AngularJS 只能在 AngularJS 的范围内观察模型的变化。因此，如果您希望 2-way 数据绑定神奇地工作，您需要使用 Angular 的方式而不是 jQuery 等其他方式进行修改。

于 2013-08-19T02:37:11.967 回答