Dom 以编程方式使用ng模型添加divElement

我试图在angular dart中构建一个富文本编辑器，但在按代码添加元素时遇到了一些问题

Html:

省道：

类RichTextEditorComp实现ShadowRootAware{
String text='Write here
\n
这是一个图像'；
html.DivElement_文本框；
html.DivElement\u工具栏；
html.DivElement_textEditorContainer；
RichTextEditorComp（此.\u元素）{
_textEditorContainer=new html.DivElement（）；
_text编辑器container.children.add（_buildToolbar（））；
_text编辑器container.children.add（_buildEditor（text））；
}
最终的html.Element\u元素；
void onShadowRoot（最终html.ShadowRoot ShadowRoot）{
this._container=_element.querySelector（“#文本容器”）；
此._container.children.add（_textEditorContainer）；
}
_构建编辑器（字符串起始点文本）{
_textbox=new html.DivElement（）；
_setAttribute（'ng-model'，'text'）；
_textbox.contentEditable=“true”；
返回文本框；
}

当我编译到js时，ng模型不起作用。我想我需要做更多的工作，但我不知道该做什么。我也尝试过这个html：

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

---

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

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

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

@组件（选择器：'.container'，模板URL:'rich_text.html'）
类RichTextEditorComp{
String text='Write here
\n
这是一个图像'；
}

---

这将使您的模型具有适当的绑定，同时更加简单且具有惯用的角度。

关于此主题，这里很少有类似的问题。您需要“编译”DOM节点以使角度评估标记名和属性，但自从我上次使用它以来，命令发生了更改。（）谢谢你的意见。这解决了问题，但没有回答我的问题。我知道你是对的，但我想为了学习的目的动态地整理问题

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