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
– Arun P Johny, Commented Mar 27, 2013 at 11:08

Arun P Johny · Accepted Answer · 2013-03-27 11:31:48Z

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, 2013 at 11:31

answered Mar 27, 2013 at 11:23

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

firia2000 Over a year ago

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 Over a year ago

And there is one important notification for second code. For second code working correctly, we need jquery and jquery.js inclusion code(<script ...></script>) should be placed before inclusion angular.js code in html FYI: stackoverflow.com/questions/13480796/…

Arun P Johny Over a year ago

which way are you going to use

Chris Moschini · Accepted Answer · 2013-03-27 11:36:38Z

1

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

answered Mar 27, 2013 at 11:36

Chris Moschini

38.2k19 gold badges167 silver badges196 bronze badges

Comments

Robin Drexler · Accepted Answer · 2013-03-27 11:03:09Z

0

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

answered Mar 27, 2013 at 11:03

Robin Drexler

4,4773 gold badges28 silver badges28 bronze badges

Comments

Piet van Dongen · Accepted Answer · 2013-03-27 11:03:49Z

0

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

answered Mar 27, 2013 at 11:03

Piet van Dongen

1,63910 silver badges13 bronze badges

Collectives™ on Stack Overflow

AngularJS data binding by DOM manipulation

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related