Question

我有以下型号：

{
  content: "Hello world, this is a sample content",
  notes: {
    content: "side note, some text here.",
    index: 2
  }
}

我喜欢将上面的模型编译成以下HTML：

<div class="content">
    Hello world,*
    <div class="note">side note, some text here.</div>
    this is a sample text. 
</div>

如何做到这一点？据我所知，最好的方法是使用指令，如<div content="{{ content }}"></div>。我试着编写这个指令并使用编译服务但没有取得多大成功......

我想在第二个单词之后将用HTML编译的注释注入内容（请参阅注释索引位置为2）。

我这里有两个模板，一个用于内容，另一个用于注释。我想用它的视图编译注释，然后在第二次工作后将其输入到内容文本中。然后，我想根据它的观点编译内容。

Answer 1

我想我会效仿。这些笔记的样式看起来像边缘笔记或工具提示，对吗？

这在指令中应该很容易实现。我会像这样实例化（虽然实现细节取决于你）：

<div note-section 
  note="{{notes.content}}" 
  note-index="{{notes.index}}" 
  content="{{content}}">
</div>

好的。然后，在链接功能中，您可以访问所有这些属性。那么我会监视更改，当它们发生时，在scope.content字符串中搜索scope.noteIndex字所在的适当索引，然后将字符串切成两部分，插入如下的注释模板介于它之间：

var tmpl, childElement;

tmpl = beforeNote + '<span note="{{note}}"></span>' + afterNote;
childElement = $compile( tmpl )( scope );

element.append( childElement );

note元素是一个具有隔离范围的指令（用于安全性）。

然后渲染的DOM节点将符合您上面的目标。这是非常通用的，并且有数以万计的变化取决于您的实现，但这是我遵循的一般模式。

在Plunker或jsFiddle上捅一下，发布你想出的东西！

Answer 2

问题：为什么笔记必须出现在特定位置（索引）的HTML中，为什么它不能总是出现在之前或之后？是否有特定原因，或者这是否支持造型？

如果您尝试支持样式设置，可以使用更好，更简单的方法来完成此操作，例如使用float: right等。

据我所知，没有内置的方法来完成这样的输出。如果您必须具有该特定HTML，则可以尝试以下jsFiddle：http://jsfiddle.net/69ApD/。

二级模型编译

2 个答案: