0

我有以下模型：

{
  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）。

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

4

2 回答 2

2

我想我跟着。注释的样式将看起来像边注或工具提示，对吗？

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

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

好吧。然后，在您的链接功能中，您可以访问所有这些属性。所以我会 $watch 寻找变化，当它们发生时，在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 上尝试一下，然后发布你的想法！

于 2013-01-20T23:21:20.530 回答
0

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

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

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

于 2013-01-20T23:37:26.620 回答