Javascript 角度：如何处理两部分指令

我正在实现一个指令，它基本上是将脚注列表插入到一个文本体中，并具有popover功能。我有一个

text notes

指令，该指令用于在父元素上运行，动态加载内容及其关联的文本注释。当前模板启动如下内容：

<div class="body" data-ng-bind-html="content" data-text-notes></div>
<div id="text-notes"></div>

<div class="body" data-ng-bind-html="content" data-text-notes>
  Content with some footnote attached.<a href="#fn1">[fn1]</a>
  More content, with another footnote.<a href="#fn2">[fn2]</a>
</div>
<div id="text-notes">
  <p id="fn1">[fn1] Some footnote text</p>
  <p id="fn2">[fn2] Another bit of footnote text</p>
</div>

添加了

数据文本注释的预期结果如下所示：

<div class="body" data-ng-bind-html="content" data-text-notes></div>
<div id="text-notes"></div>

<div class="body" data-ng-bind-html="content" data-text-notes>
  Content with some footnote attached.<a href="#fn1">[fn1]</a>
  More content, with another footnote.<a href="#fn2">[fn2]</a>
</div>
<div id="text-notes">
  <p id="fn1">[fn1] Some footnote text</p>
  <p id="fn2">[fn2] Another bit of footnote text</p>
</div>

因为要插入的项目的长度可能很大，所以我确实需要以某种方式在页面底部分别呈现插入的注释内容

我已经相当仔细地阅读了Angular文档本身，并查看了一些示例，但这是我实现的第一个实质性指令，我不喜欢这种实现：它可以工作，但似乎不太正确。此外，我不确定它是否能很好地满足制作弹出式沙发的需要。
拥有类似于：

<div class="body" data-ng-bind-html="content"></div>
<div id="text-notes">
    <p ng-repeat="note in notes" ng-attr-id="{{note.id}}">[{{note.id}}]{{note.text}}</p>
</div>

虽然您可能希望在添加所有链接后只运行$compile一次，但出于性能原因。
我认为使用$compile渲染html@Cerbrus，这也是我的想法，我只是在想最好的方法，也许没有什么帮助，注释中的
元素是预先呈现的（尽管我可以更改）
{note.content}
或类似的内容……这是朝着正确的方向迈出的一步，它很可能适用于注释本身。但是，我需要在第一个body/content div中的呈现内容中插入链接（我将更新问题以反映这一点）。这就是我正在做的部分。呈现notes内容更为直接，我同意
ng repeat
方法应该在那里起作用。对于这一部分，您在指令中所做的事情是绕不开的。。。因为你必须解析html并进行替换..我希望不是这样，但这是有意义的。是否有必要确保在
链接
阶段正确编译插入的元素，以便它们可以附加自己的指令（用于popover）？编辑非常有用；这大概是我想我需要做的，所以很高兴知道我在正确的轨道上。谢谢
$compile(a)(scope); // compile the link before adding it to the dom
// append to dom.