通过DOM操作进行AngularJS数据绑定

Question

当我直接输入一些字符串输入元素时，AngularJS的双向数据绑定工作得很好。但是当我通过javascript代码改变input元素的值时，双向绑定不起作用。有什么好方法可以做到这一点吗？

html代码：

<div ng-app ng-controller="Ctrl">
    <input id="inputElem" ng-model="modelName" type="text"/>
    <span>{{modelName}}</span>
</div>

javascript代码：

function Ctrl($scope) {
    $scope.modelName = "";
}

function foo() {
    // THIS DOES NOT TRIGGER ANGULAR DATA-BINDING!!!!
    $("#inputElem").val("THIS IS DOM MANIPULATION");
}

Answer 1

您可以通过触发更改事件来实现这一点

$("#inputElem").val("THIS IS DOM MANIPULATION").trigger('change');

演示：Plunker

修改绑定值的另一个技巧

var scope = angular.element('#inputElem').scope();
scope.$apply(function(){
  scope.modelName = "THIS IS DOM MANIPULATION";
});

演示：Plunker

Answer 2

你真的应该为此改变模型，而不是反过来：

http://jsfiddle.net/b9chris/EBWtR/

<div ng-app>
<div ng-controller=Ctrl>
<div><input ng-model=thing /></div>
<div ng-bind=thing></div>
</div>
</div>

function Ctrl($scope) {
    $scope.thing = 'Hi';

    // Later, for some reason you want to change the
    // input in code so you update the model
    setTimeout(function() {
        $scope.thing = 'Bye';
        $scope.$apply();
    }, 2000);
}

Answer 3

当您在angular之外更改某些内容时，您必须在$scope上调用$apply才能应用您的更改。

从文档中：

$apply()用于从angular框架外部执行angular中的表达式。(例如，来自浏览器DOM事件、setTimeout、XHR或第三方库)。

http://docs.angularjs.org/api/ng.$rootScope.Scope