3

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:

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.

||||||
  • Can <div class="row"> be moved inside the template? – Mark Rajcok Jan 4 '13 at 23:19
  • Probably (creates a bit of divitis tho) – jacob Jan 4 '13 at 23:20
  • The attribute selector should select elements that match, but both the sibling selector and :last-child are being interfered with by the spans that get auto-inserted. – BoltClock Jan 5 '13 at 4:49
2

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).

||||||
0

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).

||||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.