fix(ngInclude): correctly add non-html namespaced template content #8981

caitp · 2014-09-08T18:44:00Z

It is now possible for ngInclude to correctly load SVG content in non-blink
browsers, which do not sort out the namespace when parsing HTML.

/CC @tbosch / @IgorMinar

Closes #7538

caitp · 2014-09-08T18:47:31Z

hmm, jenkins doesn't like it :(

caitp · 2014-09-08T19:00:13Z

test/ng/directive/ngIncludeSpec.js

@@ -590,6 +590,27 @@ describe('ngInclude and transcludes', function() {
      expect(root[0]).toBe(element[0]);
    });
  });
+
+
+  it('should correctly work with SVG content', function() {


Yes, this is a terrible test name, will come up with something better

caitp · 2014-09-08T19:14:03Z

It's hard to debug the failures unfortunately, ddescribe is no longer working, and it's not reproducible with iit

IgorMinar · 2014-09-08T20:30:17Z

src/ng/compile.js

+          // If there's no namespace, and no futureParentElement, then we're probably compiling
+          // nodes in-place, so we should use the $compileNode's parent element in order to figure
+          // out the namespace.
+          if (isUndefined(futureParentElement) && isUndefined(cloneConnectFn)) {


!futureParentElement && !cloneConnectFn

tbosch · 2014-09-08T20:42:07Z

The approach seems ok!

caitp · 2014-09-08T21:14:49Z

So there's a problem, Safari seems to have problems with this --- it doesn't create childNodes at all when setting innerHTML of an SVG element =( (it's possible that it's not parsing immediately or something)

// Safari 7 debugger:
> $element[0].innerHTML
< "<rect></rect>"
> $element[0].childNodes
< []

(repro at http://jsfiddle.net/hp2rm4yc/)

caitp · 2014-09-08T21:44:16Z

There's a bug filed on this already for webkit https://bugs.webkit.org/show_bug.cgi?id=135698 --- I don't mind fixing it in the browser, so after my little conference talk I can spend a few hours on that maybe. But unfortunately that doesn't do much good for fixing this in angular for the legacy Webkit browsers

IgorMinar · 2014-09-08T21:55:47Z

I agree. overall it looks good.

caitp · 2014-09-08T22:04:54Z

As a short-term solution to the safari/webkit problem, we could also abandon the test if (!'innerHTML' in SVGElement.prototype). sgty?

It is now possible for ngInclude to correctly load SVG content in non-blink browsers, which do not sort out the namespace when parsing HTML. Closes angular#7538

This reverts commit 8d5e11d.

IgorMinar · 2014-09-08T23:39:19Z

src/ng/directive/ngInclude.js

@@ -268,7 +268,17 @@ var ngIncludeFillContentDirective = ['$compile',
      require: 'ngInclude',
      link: function(scope, $element, $attr, ctrl) {
        $element.html(ctrl.template);
-        $compile($element.contents())(scope);
+        if (!$element.contents().length && ctrl.template.length) {


add a blank line above this line

could we simplify the check to !$element[0].childNodes.length && ctrl.template.length

caitp · 2014-09-08T23:44:18Z

The fix as-is doesn't really work well enough anyways (works for Safari now, but not for Chrome/Firefox) --- I think we want to take the SVG path for both chrome and FF --- so we need to tell the directive that it's supposed to be an SVG node.

I guess a quick SVG test for the toString()'d name of the template would be good enough

IgorMinar · 2014-09-08T23:45:02Z

src/ng/directive/ngInclude.js

+          // WebKit: https://bugs.webkit.org/show_bug.cgi?id=135698 --- SVG elements do not
+          // support innerHTML, so detect this here and try to generate the contents
+          // specially.
+          $element.append(jqLite(jqLiteBuildFragment(ctrl.template, document).childNodes));


AFAICT we don't need to call jqLite here.

caitp · 2014-09-08T23:49:02Z

with the latest fix, (I think) this works correctly --- it's not quite right yet, I'll try to get it ready to land tonight and merge before release

caitp · 2014-09-09T00:54:36Z

src/.jshintrc

@@ -124,6 +124,8 @@
    "jqLiteAddNodes": false,
    "jqLiteController": false,
    "jqLiteInheritedData": false,
+    "jqLiteBuildFragment": false,
+    "jqLiteParseHTML": false,


the jqLiteParseHTML addition doesn't matter much, but I don't think it's bad to have it

This makes sure that the linked element is empty before adding the content.

caitp · 2014-09-09T01:06:31Z

From local tests, the current iteration is working well on Safari, FF31 and Chrome --- I think it's ready to squash and land --- @IgorMinar can you take a last look at it (the diff is smaller due to the removal of revert of petes commit)

caitp reviewed Sep 8, 2014
View reviewed changes

mary-poppins added cla: yes and removed cla: no labels Sep 8, 2014

caitp force-pushed the issue-7538 branch 3 times, most recently from 28dbcbe to a2922ec Compare September 8, 2014 20:29

IgorMinar reviewed Sep 8, 2014
View reviewed changes

caitp force-pushed the issue-7538 branch 3 times, most recently from ec59785 to 8d5e11d Compare September 8, 2014 20:54

caitp added 5 commits September 8, 2014 18:59

chore(.jshintrc): add jqLiteBuildFragment to globals

b2227d0

chore(.jshintrc): add jqLiteParseHTML to globals

09296d5

fix(ngInclude): correctly add non-html namespaced template content

026a1f8

It is now possible for ngInclude to correctly load SVG content in non-blink browsers, which do not sort out the namespace when parsing HTML. Closes angular#7538

WIP: make broken tests pass, yeah

c5c08d7

Revert "WIP: make broken tests pass, yeah"

9af0e85

This reverts commit 8d5e11d.

IgorMinar reviewed Sep 8, 2014
View reviewed changes

caitp force-pushed the issue-7538 branch 2 times, most recently from e336b80 to 0471aa8 Compare September 8, 2014 23:48

caitp added 4 commits September 8, 2014 20:53

WIP: fix again, but moreso this time

2ee7ac3

WIP

f2f8d42

Test for SVG-ness in ngIncludeFillContent linkFn

70a515d

WIP --- Final version of fix

2a8da48

caitp force-pushed the issue-7538 branch from 0471aa8 to 2a8da48 Compare September 9, 2014 00:54

caitp reviewed Sep 9, 2014
View reviewed changes

WIP: make SVG ngIncluded templates behave the same as HTML templates

c5478ad

This makes sure that the linked element is empty before adding the content.

caitp mentioned this pull request Sep 9, 2014

fix(ngInclude): correctly add svg-namespaced template content [[squashed]] #8997

Closed

caitp closed this in 6639ca9 Sep 9, 2014

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(ngInclude): correctly add non-html namespaced template content #8981

fix(ngInclude): correctly add non-html namespaced template content #8981

caitp commented Sep 8, 2014

caitp commented Sep 8, 2014

caitp Sep 8, 2014

caitp commented Sep 8, 2014

IgorMinar Sep 8, 2014

tbosch commented Sep 8, 2014

caitp commented Sep 8, 2014

caitp commented Sep 8, 2014

IgorMinar commented Sep 8, 2014

caitp commented Sep 8, 2014

IgorMinar Sep 8, 2014

IgorMinar Sep 8, 2014

caitp commented Sep 8, 2014

IgorMinar Sep 8, 2014

caitp commented Sep 8, 2014

caitp Sep 9, 2014

caitp commented Sep 9, 2014

fix(ngInclude): correctly add non-html namespaced template content #8981

fix(ngInclude): correctly add non-html namespaced template content #8981

Conversation

caitp commented Sep 8, 2014

caitp commented Sep 8, 2014

caitp Sep 8, 2014

Choose a reason for hiding this comment

caitp commented Sep 8, 2014

IgorMinar Sep 8, 2014

Choose a reason for hiding this comment

tbosch commented Sep 8, 2014

caitp commented Sep 8, 2014

caitp commented Sep 8, 2014

IgorMinar commented Sep 8, 2014

caitp commented Sep 8, 2014

IgorMinar Sep 8, 2014

Choose a reason for hiding this comment

IgorMinar Sep 8, 2014

Choose a reason for hiding this comment

caitp commented Sep 8, 2014

IgorMinar Sep 8, 2014

Choose a reason for hiding this comment

caitp commented Sep 8, 2014

caitp Sep 9, 2014

Choose a reason for hiding this comment

caitp commented Sep 9, 2014