Stop AngularJS inserting 2019-02-18 18:21发布 站内文章 / 前沿技术 29 0 0

问题:

I'm using the Foundation layout framework, which automatically floats the last sibling of .column to the right and I really appreciate this is a behaviour. However, AngularJS takes it upon itself to insert span.ng-scope after every div.column, which somehow causes browsers to consider the last span the last sibling of .column (even though it is not).

Specifically the css in Foundation responsible for this is:

[class*="column"] + [class*="column"]:last-child { float: right; }

As I understand it, [attribute*="substring"] should select only siblings that match, so, for the above, only elements whose class attribute contains column (including columns). I would think a span tag whose class attribute that does not contain column should not match (and thus be ignored by :last-child). However, this does not seem to be the case.

Regardless, the span is causing the problem:

• Angular buggering it up (jsfiddle)
• Works fine without Angular (same jsfiddle, no ng-include)

Is there a way to configure angular to stop inserting those span tags? I would, begrudgingly, modify the css selector to somehow ignore all span tags; however I might eventually need/want to use a span tag.

回答1:

Since you indicated the div can be moved inside, this works:

<ng-include src="'main.tmpl'"></ng-include>

Then in your template:

<div class="row">
   <article id="sidepanels" class="four columns">
   ...
</div>

I'm not aware of any way to prevent angular from inserting the span tags (I think it keeps track of scopes that way -- for garbage collection).

回答2:

Also you can try my version of include directive that does not creates a scope: Gist source.

As no scopes are created, AngularJS should not create additional element to mainain scope (it actually use data attributes to store link to scope).