ngInclude: is there a way to make it behave like having “replace: true”?

[Vlad GURDIGA]

Hey guys!

I’m using <ng-include src="'partial'"/> a lot, and sometimes the resultant markup breaks because of the <ng-include/> tags. Is there a way to make it replace itself with the included content? Basically as having “replace: true” in the directive definition.

I’ve cloned the repo and tried adding it, just for the sake of experiment, but it didn’t help. As far as I can understand, the linking function does something magic in there, and the solution is not as simple as adding “replace: true” in its definition. :-/

Thank you!

[OpenNota]

<div ng-include="'partial'" ...> does not help? Or <td>, <tr>, whatever fits in your html.

[Vlad GURDIGA]

Thank you for your response OpenNota.

In my particular case I am including a few more <li>s in an <ul>, so in the end I get something like this:

<ul>

  <li>my existing li</li>

  <ng-include ...>

    <li>the li included on some condition</li>

    <li>the li included on some condition</li>

    <li>the li included on some condition</li>

    <ng-include ...>

      <li>the li included on some other condition</li>

      <li>the li included on some other condition</li>

    </ng-include>

  </ng-include>

  <ng-include ...>

    <li>the li included on yet another condition</li>

    <li>the li included on yet another condition</li>

    <li>the li included on yet another condition</li>

  </ng-include>

</ul>

So putting the ng-include on the element itself seems not to be an option.

[Eddie Huang]

Nope, also from experience, replace:true tends to be problematic.

[Vlad GURDIGA]

I‘m sorry, “Nope” what? :) And what exactly were the problematic sides of using replace: true?

[חן נעם‎]

Hi Vlad,

I had the same issue when I used dynamic template in directive.

When I wrote:

<div ng-include="getTemplateUrl()"></div>

all my format breaks.

I found a solution, I've changed it to 

<span ng-include="getTemplateUrl()"></span>

and it is working perfectly.

Hope you can used my solution too.

Best regards,

Chen

בתאריך יום ראשון, 20 באוקטובר 2013 16:28:35 UTC+2, מאת Vlad GURDIGA:

[Vlad GURDIGA]

Hey Chen!

Thank you for sharing your experience with this thing! :)

My [little] issue though is that <ng-include>, when used in this tag form, is generating additional markup. This has to problems:

1. in some specific cases this breaks markup for example when you try to include <option>s in a <select>, <td>s in a <tr>, other cases where there is a strict relationship between the container and the included tags.
   
2. makes DOM inspection harder

I understand this can be worked around with custom directives, but in my case that was a bit of an overkill. :)

[חן נעם‎]

Hi Vlad,

I understand. it's odd. You can try contacting Google Developers/Github , maybe they have answers.

Good luck,

Chen

2013/11/4 Vlad GURDIGA <gur...@gmail.com>

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/jDEt-YFQtqc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

[Henrique Recidive]

Hello, any progress on this?

I'm going to dig on issues on github to figure out if someone has already done any progress on this direction, but would like to know if had any progress with your research.

I believe it's possible to patch ngInclude to make it use the element from the template instead of cloning the caller element like it does. It could also be feasible to make a "replace" directive that you could use instead of ngInclude or in conjunction with it to achieve this behavior.

Please advise.

Thanks,

Henrique

[Sander Elias]

Hi,

If you really need this, it is quite easy to make your own directive for this. An easy way out is clone the ng-Include directive form the source, and modify it so so it can be used as comment.

I don't think it makes sense to make this an AngularJS standart thing.

Regards

Sander

[Henrique Recidive]

Hello Sander, thanks for the reply,

the project I'm working on is a web application framework, so it makes sense to have small reusable templates, to allow some kind of flexibility even for those who don't know AngularJS. The problem is that those wrapper elements you need to create for ng-include breaks some css selectors (e.g. .element>.another-one) and sometimes using them is unavoidable.

I'm new to AngularJS core development but maybe adding a ng-replace="true" to be used in conjunction with ng-include or a ng-replace="template.html" to be used instead of ng-include would make good additions to AngularJS core since it makes a nice pair with Twitter Bootstrap that makes heavy use of these kind of selectors. That's just my opinion. I'm going to clone ngInclude and try to make a ngReplace out of it, otherwise I would have to create a directive with replace=true for every template I want to include and can't use ng-include due to the wrapper div.

Henrique

2013/11/20 Sander Elias <sande...@gmail.com>

--

[Vlad GURDIGA]

Hi Sander,

I have thought about that, and even tried a couple of times, and again today. But it seems like my knowledge is too thin for that; and also that part of code seems to change every time I tried to understand it and make it fit my needs.

From what you’re saying it seems to be almost a trivial change. If that’s the case, would you please sketch a quick patch and put it in a gist so that others that have this issue would have an easy starting point? That would be enormously useful.

[Sander Elias]

Hi Vlad,

During the day it hit me, this version also does the nesting thing. Using jqLite to create the element messed it up in the previous version.

http://plnkr.co/edit/3UHmFTFqd64mspHopWrE?p=preview

Regards

Sander

[Vlad GURDIGA]

Very nice! Thanks a lot, I will definitely make use of it. ;)

[Rob Jacobs]

You can override/extend the native directives by creating one with the same name, like so:

app.directive('ngInclude', [
    function () {
        return {
            replace: true,
            link: function (scope, element, attrs) {
            }
        }
    }
])

setting priority will determine which directive will get hit first.  The native one has a priority of 400.

[Vlad GURDIGA]

Hey Rob!

This looks interesting, but it seems like I can’t get it to work… :-/

Could you please put in into a JSfiddle or something similar and paste the link here so that we can play with it?

Thanks for looking at this!