fix($compile): support class directives on SVG elements

caitp · caitp · commit 23c8a90d22f7 · 2015-01-15T13:58:57.000-05:00
Closes angular#10736 Closes angular#10756
diff --git a/src/ng/compile.js b/src/ng/compile.js
@@ -1450,6 +1450,10 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
 
           // use class as directive
           className = node.className;
+          if (isObject(className)) {
+              // Maybe SVGAnimatedString
+              className = className.animVal;
+          }
           if (isString(className) && className !== '') {
             while (match = CLASS_DIRECTIVE_REGEXP.exec(className)) {
               nName = directiveNormalize(match[2]);
diff --git a/test/ng/compileSpec.js b/test/ng/compileSpec.js
@@ -443,6 +443,17 @@ describe('$compile', function() {
       }));
 
 
+      it('should allow directives in SVG element classes', inject(function($compile, $rootScope, log) {
+        if (!window.SVGElement) return;
+        element = $compile('<svg><text class="greet: angular; log:123;"></text></svg>')($rootScope);
+        var text = element.children().eq(0);
+        // In old Safari, SVG elements don't have innerHTML, so element.html() won't work
+        // (https://bugs.webkit.org/show_bug.cgi?id=136903)
+        expect(text.text()).toEqual('Hello angular');
+        expect(log).toEqual('123');
+      }));
+
+
       it('should ignore not set CSS classes on SVG elements', inject(function($compile, $rootScope, log) {
         if (!window.SVGElement) return;
         // According to spec SVG element className property is readonly, but only FF
