How to get the content out of an editable div in angularjs

Question

I am trying to get the content out of an editable div. But i am stuck at implementing the angular template for it.

I am not sure how to map model data from html template to angular controller.

<div ng-repeat="todo in todos">                 
    <div class="todo.id" ng-model={{ ? }} contenteditable="true">
        <pre>{{ todo.text }}</pre>                          
    </div>
    <button type="button" class="btn btn-link"
        ng-click="editTodo(todo.id)">Edit</button>
</div>

I want to pass whatever text i have under

<div class="todo.id"></div>

Since my div is under ng-repeat, i cannot set ng-model to one scope variable.

What should i have within "ng-model={{ ? }}". Or is there a workaround for such a scenario.

Please guide me on this.

I have added more desc. Hope its clear now. I dont know what to write within 'ng-model' so that i can pass the value within a particular div, to angular controller. — jsbisht, Dec 13 '14 at 18:15
still its unclear. u dont tell us what you exactly want? u want new scope? or u want to show ng repeat values in div tag.....? — micronyks, Dec 13 '14 at 18:29
I think, he use `ngModel` attr for own purpose in `contenteditable` directive. Better to use any attribute w/o `ng-` prefix in this case. — vp_arth, Dec 13 '14 at 18:33
And yes, `todo.text` already mapped to your controller as `$scope.todos[$index]` — vp_arth, Dec 13 '14 at 18:35
@micronyks i want to read the value of 'div class="todo.id"', when i click the button for any of the todo item. — jsbisht, Dec 13 '14 at 18:46
@vp_arth Thanks for that. I got a usage of your suggestion on stackoverflow: http://stackoverflow.com/questions/19573001/how-to-generates-dynamically-ng-model-my-index-with-ng-repeat-in-angularj — jsbisht, Dec 13 '14 at 18:48
@vp_arth on your third comment i have a question. Does that mean, i whatever change i do inside the contenteditable div, i can read the same under my controller through $scope.todos[$index]? — jsbisht, Dec 13 '14 at 18:50
if your directive changes your `todo.text` only. I can't to know, how your `contenteditable` works :) — vp_arth, Dec 13 '14 at 18:52
May be you should write `ng-model="todo.text"` for this. Also you should remove any content like `
...` inside. — vp_arth, Dec 13 '14 at 18:53
its simple... use ng-click=editToDo( $index, todo)... it will return whole object with its index which u can manipulate according to ur needs....todo. id is the one assigned to ur individual div class. manipulate it accordingly. — micronyks, Dec 14 '14 at 03:05
that picks up the right element, but not picking the updated 'todo' value, after the div content is edited. — jsbisht, Dec 14 '14 at 06:12

user3527354 · Accepted Answer · 2014-12-13T18:33:50.137

To make a div content editable in angular, you need to create a contenteditable directive.

There is an example for this in the angular documentation here:

https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#custom-control-example

and a great blog entry from Gabo Esquivel on the topic here: http://gaboesquivel.com/blog/2014/in-place-editing-with-contenteditable-and-angularjs/

As you can see in Gabriel's example, the code for such a directive would be like this (I've added some comments to better understand whats going on):

app.directive("contenteditable", function() {
  return {
    require: "ngModel",
    link: function(scope, element, attrs, ngModel) {

      //read the text typed in the div (syncing model with the view)
      function read() {
        ngModel.$setViewValue(element.html());
      }

      //render the data now in your model into your view
      //$render is invoked when the modelvalue differs from the viewvalue
      //see documentation: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#
      ngModel.$render = function() {
        element.html(ngModel.$viewValue || "");
      };

      //do this whenever someone starts typing
      element.bind("blur keyup change", function() {
        scope.$apply(read);
      });
    }
  };
});

Good luck!

Thanks for that. I am too new too understand all that. I will learn more and try that out :) — jsbisht, Dec 13 '14 at 19:41
I highly recommend that you learn directives, services, and factories. They are the real powerhouses behind Angular. Dan Wahlin has great video tutorials on how to create directives. I highly recommend looking into them. — Adobe Flex Coder 0622, Dec 13 '14 at 22:28
@user3527354 I got this working now. I guess that implementing a directive for a div type is mandatory to be editable(unlike input tag). Thanks alot. — jsbisht, Dec 14 '14 at 07:59

How to get the content out of an editable div in angularjs

1 Answers1