通过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