Add divElement with ng-model programmatically

Question

I'm trying to build a rich text editor in angular dart, but I'm having some issues when I'm adding an element by code.

Html:

<div id="text-container" class="container"> </div>

Dart:

class RichTextEditorComp implements ShadowRootAware{

  String text = 'Write <b>here</b><br>\n  <br> This is an <i> image</i> ';
  html.DivElement _textbox;
  html.DivElement _toolbar;
  html.DivElement _textEditorContainer;

  RichTextEditorComp(this._element){
    _textEditorContainer = new html.DivElement();
    _textEditorContainer.children.add(_buildToolbar());
    _textEditorContainer.children.add(_buildEditor(text));
  }

  final html.Element _element;

  void onShadowRoot(final html.ShadowRoot shadowRoot) {
    this._container =  _element.querySelector('#text-container');
    this._container.children.add(_textEditorContainer) ;
  }


  _buildEditor(String startingPointText) {
    _textbox = new html.DivElement();
    _textbox.setAttribute('ng-model', 'text');
    _textbox.contentEditable = "true";
    return _textbox;
  }

When I compile to js, the ng-model does not work. I guess I need to do some more, but I can't find out what to do. I've tried this html as well:

<div id="text-container" class="container" ng-model="text" contenteditable="true"></div>

And this works as planned. How to sort this out?

There are few similar questions here about this topic. You need to "compile" the DOM node to make Angular evaluate tag names and attributes but the commands changed since I used it the last time myself. (http://stackoverflow.com/questions/20423565) — Günter Zöchbauer, Jan 13 '15 at 14:54

score 0 · Answer 1 · answered Jan 13 '15 at 15:40

The obvious solution is to avoid dynamically adding elements in the first place. Consider this solution.

rich_text.html

<div>
    <div id="toolbar">...</div>
    <div id="textbox" ng-model="text" contenteditable="true"></div>
</div>

Dart

@Component(selector: '.container', templateUrl: 'rich_text.html')
class RichTextEditorComp {
  String text = 'Write <b>here</b><br>\n  <br> This is an <i> image</i> ';
}

This will have your models binding appropriately, while being much simpler and being idiomatic angular.

Thanks for the input. This solves the problem but does not answer my question. I know you are right, but I'd like to sort out the problem dynamically for the learning purpose — Øystein W., Jan 13 '15 at 22:07

Add divElement with ng-model programmatically

1 Answers1