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