Question

我正在尝试在角落飞镖中构建一个富文本编辑器，但是当我按代码添加元素时，我遇到了一些问题。

HTML：

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

落镖：

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;
  }

当我编译为js时，ng-model不起作用。我想我需要做更多，但我不知道该怎么做。我也试过这个HTML：

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

这按计划进行。如何解决这个问题？

Answer 1

显而易见的解决方案是避免首先动态添加元素。考虑这个解决方案。

<强> rich_text.html

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

<强>达特

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

这将使您的模型适当地绑定，同时更简单并且是惯用的角度。

以编程方式添加ng-model的divElement

1 个答案: