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

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

Author: caitp

src/ng/directive/ngInclude.js

@@ -267,6 +267,18 @@ var ngIncludeFillContentDirective = ['$compile',
       priority: -400,
       require: 'ngInclude',
       link: function(scope, $element, $attr, ctrl) {
+        if (/SVG/.test($element[0].toString())) {
+          // 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.empty();
+          $compile(jqLiteBuildFragment(ctrl.template, document).childNodes)(scope,
+              function namespaceAdaptedClone(clone) {
+            $element.append(clone);
+          }, undefined, undefined, $element);
+          return;
+        }
+
         $element.html(ctrl.template);
         $compile($element.contents())(scope);
       }

test/ng/directive/ngIncludeSpec.js

@@ -362,6 +362,46 @@ describe('ngInclude', function() {
   }));
 
 
+  it('should construct SVG template elements with correct namespace', function() {
+    if (!window.SVGRectElement) return;
+    module(function($compileProvider) {
+      $compileProvider.directive('test', valueFn({
+        templateNamespace: 'svg',
+        templateUrl: 'my-rect.html',
+        replace: true
+      }));
+    });
+    inject(function($compile, $rootScope, $httpBackend) {
+      $httpBackend.expectGET('my-rect.html').respond('<g ng-include="\'include.svg\'"></g>');
+      $httpBackend.expectGET('include.svg').respond('<rect></rect><rect></rect>');
+      element = $compile('<svg><test></test></svg>')($rootScope);
+      $httpBackend.flush();
+      var child = element.find('rect');
+      expect(child.length).toBe(2);
+      expect(child[0] instanceof SVGRectElement).toBe(true);
+    });
+  });
+
+
+  it('should compile only the template content of an SVG template', function() {
+    if (!window.SVGRectElement) return;
+    module(function($compileProvider) {
+      $compileProvider.directive('test', valueFn({
+        templateNamespace: 'svg',
+        templateUrl: 'my-rect.html',
+        replace: true
+      }));
+    });
+    inject(function($compile, $rootScope, $httpBackend) {
+      $httpBackend.expectGET('my-rect.html').respond('<g ng-include="\'include.svg\'"><a></a></g>');
+      $httpBackend.expectGET('include.svg').respond('<rect></rect><rect></rect>');
+      element = $compile('<svg><test></test></svg>')($rootScope);
+      $httpBackend.flush();
+      expect(element.find('a').length).toBe(0);
+    });
+  });
+
+
   describe('autoscroll', function() {
     var autoScrollSpy;