1

当我直接输入一些字符串来输入元素时，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");
}
4

4 回答 4

5

您可以通过触发更改事件来实现此目的

$("#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

于 2013-03-27T11:23:40.993 回答
1

您真的应该为此更改模型，而不是相反：

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);
}
于 2013-03-27T11:36:38.600 回答
0

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

从文档：

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

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

于 2013-03-27T11:03:09.620 回答
0

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

于 2013-03-27T11:03:49.553 回答