CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
Jack
Jack

Reputation: 7557

ng-model binding not working on div

The two binding of AngularJS is not working on div. I want my div to be editable but it's not happening. Could anybody please suggest what could be wrong? The same binding works fine on textbox. This is my code:

<input type="text" ng-model="userProfile.firstName"/>
<div class="profile-name" contenteditable="true" ng-model="userProfile.firstName"></div>

Upvotes: 20

Views: 36172

Answers (3)

whoami
whoami

Reputation: 1627

use ng-bind. 

<ANY
  ng-bind="expression">
...
</ANY>

Check https://docs.angularjs.org/api/ng/directive/ngBind.

Upvotes: 3

Serhii Kozachenko
Serhii Kozachenko

Reputation: 1401

Please try this, it might help https://github.com/angular/angular.js/issues/528

This is a 3 year old open issue that tons of people would like fixed. It's marked as a post-1.2-milestone and a feature rather than a bug. Seeing as Angular.js is on release 1.2.13 as of Feb 2014, it looks like no one on the team cares about this issue at the moment. As a result you'll be better off rolling your own code or sticking with a input/textarea control.

Upvotes: 13

Joe Minichino
Joe Minichino

Reputation: 2773

that's the correct behaviour. from angular docs "ng-model Is a directive that tells Angular to do two-way data binding. It works together with input, select, textarea. You can easily write your own directives to use ngModel as well."

in other words, if you want it to work with a div declare a directive which binds the model to the innerhtml of the div. docs here

Upvotes: 6

Related Questions