CODEWITHSUNDEEP
angularjscontenteditableangular-directive
jcuenod
jcuenod

Reputation: 58375

Contenteditable with ng-model

I am using a contenteditable directive (code out of this discussion: https://github.com/angular/angular.js/issues/528) to allow my model to be updated. I want to update on the backend as well though (I'm using ngResource).

My template is loops through person in people and for each person:

<span contenteditable ng-model="person.name" ng-blur="updatePersonName(person)">{{person.name}}</span>

I would have thought that person would be an updated variable on blur but when I console.log person in updatePersonName I get weird output:

Resource {id: 1, name: "Bob the Builder", created_at: "2015-04-23T14:57:28.999Z", updated_at: "2015-04-28T11:42:05.701Z", $$hashKey: "object:4"…}
 $$hashKey: "object:4"
 created_at: "2015-04-23T14:57:28.999Z"id: 1
 name: "Bob the Builder With Modifications"
 updated_at: "2015-04-28T11:42:05.701Z"
 __proto__: Resource

Note the difference between the names (the second part of this output is the expanded view)

The directive uses:

element.bind("blur", function() {
    scope.$apply(read);
});

When I call update on my Person resource, it sends the original model but then seems to update the model locally so that if I make another modification it sends my first change and lags one iteration behind.

Upvotes: 1

Views: 1337

Answers (1)

jcuenod
jcuenod

Reputation: 58375

As per @PetrAveryanov's comment, the problem is that ng-blur fires before the model has changed (hence the strange output). ng-change, however, fires only once the model has been updated (unlike javascript's change event). S the solution was simply:

<span contenteditable ng-model="person.name" ng-change="updatePersonName(person)">{{person.name}}</span>

Upvotes: 1

Related Questions