Making Angular JS support binding contenteditable element to an object

[Fitzchak Yitzchaki]

See this issue:

https://github.com/angular/angular.js/issues/4691

Basically I want to be able to bind an object to a contenteditable div, and having two way binding.

The object can be like:

{

   title: 'Post title',

   paragraphs: ['Paragraph 1', 'Paragraph 2']

}

This should be parsed before binding to the element and be formatted as:

<div class="title">Post title</div>

<div class="paragraphs">

    <p>Paragraph 1</p>

    <p>Paragraph 2</p>

</div>

This is one way binding, from the model to the view. Now I need also support binding from the view to the model, using a parser to the HTML string and applying it to the original model. Something like:

ngModel.$setModelValue(value){

   // No need to show here the parsing code. This is an example, which hard coded text:

   ngModel.$modelValue.titile = 'new edited title',

   ngModel.$modelValue.parahraphs = ['Paragraph 1 edited', 'New paragraph 2'];

}

Can anyone help me modify the AngularJS code to support this, so we can have a nice PR with this feature?

[Alon Nisser]

Not exactly on the point, but could lead you in the right direction:

This is a directive that implements two way binding with contenteditable: https://github.com/akatov/angular-contenteditable

[Fitzchak Yitzchaki]

I looked into this directive, and learn from it, but it provides two way binding to a string. This is already done in my code, and it simply using the ngModelController.

The problem how do I make it bindable to an object?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

[alonn]

I'll be also happy to know if this can be done, I suspect not automatically

Twitter:@alonisser

LinkedIn Profile

Facebook

Tech blog:4p-tech.co.il/blog

Personal Blog:degeladom.wordpress.com

Tel:972-54-6734469

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/Rhwqkn5QVpU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

[Dmitri Akatov]

So the way that I do this is just to put a watch on the scope variable that is bound to the contenteditable div. You can then update the object that you want from the string of the contenteditable div in any way you like. Similiarly, you can watch that object, too, and update the string that is bound to the contenteditable div. This establishes a two-way binding.

E.g.

<div ng-controller="c">

  <pre>{{ model }}</pre>

  <div ng-model="str" contenteditable></div>

</div>

angular.module('module').controller(''c", ['$scope', function($scope){

  $scope.$watch('str', function(str) {

    $scope.model = { val: str }

  })

  $scope.$watch('model', function(model){

    $scope.str = model.val

  })

  $scope.str = "start"

}])