AngularJS data binding by DOM manipulation

Question

When I type some string to input element directly, two-way data binding of AngularJS works very well. But when I change value of input element by javascript code, two-way binding does not work. Is there a good way for doing this?

html code:

<div ng-app ng-controller="Ctrl">
    <input id="inputElem" ng-model="modelName" type="text"/>
    <span>{{modelName}}</span>
</div>

javascript code:

function Ctrl($scope) {
    $scope.modelName = "";
}

function foo() {
    // THIS DOES NOT TRIGGER ANGULAR DATA-BINDING!!!!
    $("#inputElem").val("THIS IS DOM MANIPULATION");
}

This not the way you do it in angularjs, instead of changing teh value of the input field you need to change the value of the binded field — Arun P Johny, Mar 27 '13 at 11:08

Arun P Johny · Accepted Answer · 2013-03-27T11:31:48.623

5

You can achieve this by triggering the change event

$("#inputElem").val("THIS IS DOM MANIPULATION").trigger('change');

Demo: Plunker

Another hack to modify the binded value

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

Demo: Plunker

edited Mar 27 '13 at 11:31

answered Mar 27 '13 at 11:23

Arun P Johny

384,651
66
527
531

Thanks! This is exactly what I want! But first code does not work. I think it is because AngularJS does not add any event listener to DOM element. Actually #inputElem had no event listener on 'onchange' when I checked with javascript console. – firia2000 Mar 27 '13 at 13:46
2

And there is one important notification for second code. For second code working correctly, we need jquery and jquery.js inclusion code() should be placed before inclusion angular.js code in html FYI: http://stackoverflow.com/questions/13480796/error-selectors-not-implemented – firia2000 Mar 27 '13 at 13:53
which way are you going to use – Arun P Johny Mar 27 '13 at 13:54

score 1 · Answer 2 · answered Mar 27 '13 at 11:36

You're really supposed to change the model for that rather than the other way around:

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

score 0 · Answer 3 · answered Mar 27 '13 at 11:03

When you change something outside of angular, you have to call $apply on the $scope, to have your changes applied.

From the docs:

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries).

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

score 0 · Answer 4 · answered Mar 27 '13 at 11:03

0

You can use the ngChange directive for that: http://docs.angularjs.org/api/ng.directive:ngChange

answered Mar 27 '13 at 11:03

Piet van Dongen

1,629
10
13

AngularJS data binding by DOM manipulation

4 Answers4