Element DOM injected won't start his own directive

Question

1. I have a <ul> which contains the directive ng-repeat.
2. Inside it, I have multiple "li" which contains a directive : <li directive>.
3. The array (A) which serves the directive ng-repeat contains comments. And when the user adds comment, I want display its comment before all of others. For do this, I build an other array (B). I inject the new comment first, and then the comments from the array (A) after. In others words, I change (A) into (B) by a simple assignation (=).

The ng-repeat updates the DOM from the new content of array (A) but... but the DOM element which is binds on the directive isn't the true element, I mean the element which is in link function isn't the first comment !

This is hard to explains this, I hope you know what I want mean.

PS: If the array (A) is empty and if I adds a comment (li) the directive binds on the true element. But if there is one or more comments, that causes the problem that I have explained.

Thx you.

Answer 1

Firstly: You have very complicat handling of the new comments. You can:

• for each comment have some time id
• in ng-repeat use "track by commoent.timeId
• in ng-repeat use orderBy OR (little bit better) sort the comment array by the timeId after you push the new comment to array A. => you can remove the B array completely

Each li runs the directive separataly. That means (in your solution) that after adding each new comment, the ng-repeat DOM is completely re-rendered => the directive is used for each commment.

With my proposed solution, the directive will be called only for newly added comments (as the "track by" part prevent in re-rendering unchanged comments).

... but ... I hope that I understander your problem...

Answer 2

I think what you want is something like:

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

However without a better example in question this is just rough