Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

Transcluded content is not trimmed #15077

Closed
jjenzz opened this issue Aug 31, 2016 · 6 comments
Closed

Transcluded content is not trimmed #15077

jjenzz opened this issue Aug 31, 2016 · 6 comments

Comments

@jjenzz
Copy link

jjenzz commented Aug 31, 2016

When specifying an ng-transclude element, the documentation says you can provide a fallback that will render if no content is transcluded. However, if there is only whitespace in the transclusion slot it will replace the fallback with this whitespace.

I prefer to markup my components as follows:

<ns:legend-item
    ng-repeat="item in $ctrl.legendItems"
    ns:color="{{ item.color }}"
    ns:label="{{ item.name }}">
</ns:legend-item>

Doing it this way means it always passes some whitespace as the transcluded content and my fallback is removed. To fix I have to change the markup to:

<ns:legend-item
    ng-repeat="item in $ctrl.legendItems"
    ns:color="{{ item.color }}"
    ns:label="{{ item.name }}"></ns:legend-item>

It doesn't seem right that the position of the closing tag changes how the component renders.

I'm using Angular 1.5.5.

@rendisek70
Copy link

O

Dne 31. 8. 2016 16:16 napsal uživatel "Jenna Smith" <
notifications@github.com>:

When specifying an ng-transclude element, the documentation says you can
provide a fallback that will render if no content is transcluded. However,
if there is whitespace in the transclusion slot it will replace the
fallback with this whitespace.

I prefer to markup my components as follows:

<np:legend-item ng-repeat="item in $ctrl.legendItems" np:color="{{
item.color }}" np:label="{{ item.name }}"> /np:legend-item

Doing it this way means it always passes some whitespace as the
transcluded content and my fallback is removed. To fix I have to change the
markup to:

<np:legend-item ng-repeat="(key, item) in $ctrl.legendItems" np:color="{{
item.color }}" np:label="{{ key }}">/np:legend-item

It doesn't seem right that the position of the closing tag changes how
the component renders.

I'm using Angular 1.5.5.


You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

@Narretz
Copy link
Contributor

Narretz commented Sep 1, 2016

It doesn't seem right that the position of the closing tag changes how the component renders.

This is how the DOM works. Whitespace and linebreaks create text nodes that contain only whitespace.

I guess it's unlikely that someone wants the current behavior, but iwe cannot say 100% that it isn't so. If you minfied your html you won't have this problem.

But we have to think about if there's a better way to handle this.

@Narretz Narretz added this to the Ice Box milestone Sep 1, 2016
@jjenzz
Copy link
Author

jjenzz commented Sep 1, 2016

@Narretz: I do minify my HTML in production. However, during development everything appears broken so I'm having to avoid this approach.

I know how the DOM works, however, it seems strange that a project would require that a whitespace only transclude overrides the fallback. Of course, you can't say 100% that the current behaviour isn't what's wanted but what if the percentage it's wanted is a lot less than the percentage it isn't. It seems to render this fallback thing quite useless.

If we're concerned about keeping the way it behaves and not breaking existing code that might depend on current behaviour, could we make it optional somehow?

@petebacondarwin
Copy link
Member

OK, so I think we should probably support trimming if the content is only whitespace.
But should we always trim front and back whitespace even if there is content? I think probably not.

@petebacondarwin
Copy link
Member

Unfortunately as this would be a breaking change, we can't do it in 1.5.9. It will be in 1.6. But you can alway patch your version of 1.5.x to get the required behaviour until you upgrade to 1.6.

@petebacondarwin petebacondarwin modified the milestones: 1.6.x, Ice Box Sep 1, 2016
@petebacondarwin petebacondarwin self-assigned this Sep 1, 2016
@Narretz Narretz modified the milestones: 1.6.0, 1.6.x (post 1.6.0) Sep 14, 2016
petebacondarwin added a commit to petebacondarwin/angular.js that referenced this issue Sep 15, 2016
If the transcluded content is only whitespace then we should use the
fallback content instead. This allows more flexibility in formatting
your HTML.

Closes angular#15077

BREAKING CHANGE:

Previously whitespace only transclusion would be treated as the transclusion
being "not empty", which meant that fallback content was not used in that
case.

Now if you only provide whitespace as the transclusion content, it will be
assumed to be empty and the fallback content will be used instead.

If you really do want whitespace then you can force it to be used by adding
a comment to the whitespace.
@petebacondarwin
Copy link
Member

I have a PR for this #15140. Please take a look @jjenzz

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.