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

When using svg directive with ngRepeat, the newly added element is not replaced with the directive template #8808

Closed
merlinchen opened this issue Aug 28, 2014 · 10 comments

Comments

@merlinchen
Copy link

There is a regression between 18 and 19 when using svg directive with ngRepeat.
beta 18 http://plnkr.co/edit/SqE1uIaJIrOA2dW8C6TH?p=preview
beta 19 http://plnkr.co/edit/BBmO3r5oQTY4Ki3Wo8Ly?p=preview

When click the add button, a new element will be pushed into the array. In beta 18, everything works fine. But in beta 19, it is repeating <my-rect> but not replacing it with the template.

@caitp
Copy link
Contributor

caitp commented Aug 28, 2014

Thanks!

@caitp caitp added this to the 1.3.0-rc.0 milestone Aug 28, 2014
@caitp
Copy link
Contributor

caitp commented Aug 28, 2014

Tentatively moving this to rc0, but that might be a bit optimistic.

@merlinchen
Copy link
Author

@caitp This only happens when the template is loaded from a separate file. If the template is loaded from inline script or simply from a string using template property, everything works fine.

Inline script: http://plnkr.co/edit/NazDEAFJVZSUSS2mnVmZ?p=preview
template property: http://plnkr.co/edit/DAyecUffsQE4cEBddnl1?p=preview

@caitp
Copy link
Contributor

caitp commented Aug 28, 2014

It also doesn't seem to effect ng-switch

@caitp
Copy link
Contributor

caitp commented Aug 28, 2014

So the downer is, I don't think we can really write a non-flakey test for it if this is the case :( ...oh, I guess that does work better than using $templateCache...

caitp referenced this issue Aug 28, 2014
Via transclusion, svg elements can occur outside an `<svg>` container in an
Angular template but are put into an `<svg>` container through compilation
and linking.

E.g.
Given that `svg-container` is a transcluding directive with
the following template:
```
<svg ng-transclude></svg>
```

The following markup creates a `<circle>` inside of an `<svg>` element
during runtime:
```
<svg-container>
  <circle></circle>
</svg-container>
```

However, this produces non working `<circle>` elements, as svg elements
need to be created inside of an `<svg>` element.

This change detects for most cases the correct namespace of transcluded content
and recreates that content in the correct `<svg>` container
when needed during compilation. For special cases it adds an addition argument
to `$transclude` that allows to specify the future parent node of elements
that will be cloned and attached using the `cloneAttachFn`.

Related to #8494
Closes #8716
@tbosch tbosch self-assigned this Aug 28, 2014
@tbosch
Copy link
Contributor

tbosch commented Aug 28, 2014

Will look into this.

tbosch added a commit to tbosch/angular.js that referenced this issue Aug 28, 2014
This fixes the case when a directive that uses `templateUrl`
is used inside of a transcluding directive like `ng-repeat`.

Fixes angular#8808
tbosch added a commit to tbosch/angular.js that referenced this issue Aug 28, 2014
This fixes the case when a directive that uses `templateUrl`
is used inside of a transcluding directive like `ng-repeat`.

Fixes angular#8808
tbosch added a commit to tbosch/angular.js that referenced this issue Aug 28, 2014
This fixes the case when a directive that uses `templateUrl`
is used inside of a transcluding directive like `ng-repeat`.

Fixes angular#8808
@tbosch tbosch closed this as completed in cb73a37 Aug 29, 2014
@merlinchen
Copy link
Author

@caitp @tbosch This issue is still exists in rc.3 if the directive is wrapped in another svg element like this:

<g ng-repeat="rect in rects">
    <my-rect index=$index></my-rect>  
</g>

http://plnkr.co/edit/ZFBWiLMP4uTF67rkf2ou?p=preview
(Only happens when the template is loaded from a separate file.)

@caitp
Copy link
Contributor

caitp commented Sep 30, 2014

why don't you guys file new bugs on this so we can actually track them? jeeze.

@caitp
Copy link
Contributor

caitp commented Sep 30, 2014

@merlinchen file a proper bug

@merlinchen
Copy link
Author

@caitp Sorry....Thought they are related. New issue here: #9344

tbosch added a commit to tbosch/angular.js that referenced this issue Oct 3, 2014
This fixes the case when a directive that uses `templateUrl`
is used somewhere in the children 
of a transcluding directive like `ng-repeat`.

Fixes angular#9344
Related to angular#8808
tbosch added a commit that referenced this issue Oct 3, 2014
This fixes the case when a directive that uses `templateUrl`
is used somewhere in the children
of a transcluding directive like `ng-repeat`.

Fixes #9344
Related to #8808
Closes #9415
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.