通过DOM操作绑定AngularJS数据

Question

当我直接在输入元素中键入一些字符串时，AngularJS的双向数据绑定效果很好。 但是，当我通过javascript代码更改输入元素的值时，双向绑定不起作用。 有一个好的方法吗？

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');

演示： 柱塞

另一个修改绑定值的技巧

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

演示： 柱塞

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

当您更改角度范围以外的内容时，必须在$ scope上调用$ apply，以应用您的更改。

从文档：

$ apply（）用于从角度框架外部以角度执行表达式。 （例如，来自浏览器DOM事件，setTimeout，XHR或第三方库）。

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

Answer 4

您可以为此使用ngChange指令： http ://docs.angularjs.org/api/ng.directive:ngChange