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

デモ：プランカー

バインドされた値を変更するための別のハック

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

デモ：プランカー

于 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 に答える