注入的元素 DOM 不会启动他自己的指令

Question

我有一个 <ul>，其中包含指令 ng-repeat。
在里面，我有多个 "li"，其中包含一个指令：<li directive>.
为指令 ng-repeat 服务的数组 (A) 包含注释。当用户添加评论时，我想在所有其他人之前显示其评论。为此，我构建了另一个数组 (B)。我首先注入新评论，然后是数组 (A) 中的评论。换句话说，我通过简单的赋值 (=) 将 (A) 更改为 (B)。

ng-repeat 从数组 (A) 的新内容更新 DOM 但是...但是绑定在指令上的 DOM 元素不是真正的元素，我的意思是 link 函数中的元素不是第一条评论！

这个很难解释，希望你明白我的意思。

PS：如果数组 (A) 为空，并且如果我添加注释 (li)，指令将绑定到真实元素。但是如果有一个或多个评论，那就会导致我已经解释过的问题。

谢谢你。

Answer 1

首先：您对新评论的处理非常复杂。您可以：

每条评论都有一些时间id
在 ng-repeat 中使用“track by commoent.timeId
在 ng-repeat 中使用 orderBy 或（更好一点）在将新评论推送到数组 A 后按 timeId 对评论数组进行排序。 => 你可以完全删除 B 数组

每个 li 分别运行指令。这意味着（在您的解决方案中）在添加每个新评论后，ng-repeat DOM 将完全重新呈现 => 该指令用于每个评论。

使用我提出的解决方案，该指令将仅针对新添加的评论调用（因为 "track by" 部分阻止重新呈现未更改的评论）。

...但是...我希望我能理解您的问题...

Answer 2

我想你想要的是这样的：

<ul>
   <li ng-if="newComment">{{newComment.text}}</li>
   <li ng-repeat="comment in comments" ng-hide="comment==newComment">
       {{comment.text}}
   <li>
</ul>

然而，如果没有更好的例子，这只是粗略的

注入的元素 DOM 不会启动他自己的指令

Element DOM injected won't start his own directive

compilation

directive

digest

angularjs

ng-repeat