Directive's content as bound data

[thomaslhostis]

Is there a way to automatically bind the directive's html content to the data?

[outsideris]

use ngModel. see https://github.com/summernote/angular-summernote#ngmodel

[thomaslhostis]

I'm sorry it was not what I meant. Let's say that, when the page loads, my summernote element already has some content. Something like:

<summernote>
    <p>Hello World</p>
</summernote>

When the directive is loaded, <p>Hello World</p> just disappears. How do you avoid that?

[outsideris]

@thomaslhostis
I meant it.
Use ngModel like <summernote ng-model="text"></summernote>, and assign the text in your controller like $scope.text = "<p>Hello World</p>";.
See example for more detail.

[thomaslhostis]

@outsideris
Exactly, I want to avoid assigning the text in the controller. What I could do is:

<summernote ng-model="text" ng-init="text='<p>Hello World</p>'"></summernote>

But I'd rather be able to do this:

<summernote><p>Hello World</p></summernote>

Is it possible, with your directive as it is, to easily do that?

[thomaslhostis]

@outsideris
I added the ng-transclude attribute to your directive's template and it works for me:

...
template: '<div class="summernote" ng-transclude></div>'
...

If you define a ng-model and set its value, it takes over the directive's HTML content. So I'm wondering, is there a reason why you didn't use ng-transclude?

This is great work, by the way.

[outsideris]

@thomaslhostis
There is no reason. Honestly, I don't know about ng-trasclude much.
Please explain about trasclude to me with more detail and what benefit it provide.
And PR also is always welcome.

[thomaslhostis]

Sure, I'll create a PR :-)

"Transclude is a setting to tell angular to capture everything that is put inside the directive in the markup and use it somewhere in the directive's template." http://stackoverflow.com/questions/24725399/what-is-ng-transclude

[outsideris]

Great!! 😄