fix($compile): ng-attr to support dash separated attribute names

angular · Oct 2, 2013 · 8e6e3eb · 8e6e3eb
1 parent ac72bee
commit 8e6e3eb
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 2 deletions.
diff --git a/src/ng/compile.js b/src/ng/compile.js
@@ -631,7 +631,7 @@ function $CompileProvider($provide) {
               // support ngAttr attribute binding
               ngAttrName = directiveNormalize(name);
               if (NG_ATTR_BINDING.test(ngAttrName)) {
-                name = ngAttrName.substr(6).toLowerCase();
+                name = snake_case(ngAttrName.substr(6), '-');
               }
 
               var directiveNName = ngAttrName.replace(/(Start|End)$/, '');

diff --git a/test/jqLiteSpec.js b/test/jqLiteSpec.js
@@ -1366,6 +1366,7 @@ describe('jqLite', function() {
      expect(camelCase('-moz-foo-bar')).toBe('MozFooBar');
      expect(camelCase('-webkit-foo-bar')).toBe('webkitFooBar');
      expect(camelCase('-webkit-foo-bar')).toBe('webkitFooBar');
-   })
+   });
   });
+
 });
diff --git a/test/ng/compileSpec.js b/test/ng/compileSpec.js
@@ -3342,6 +3342,35 @@ describe('$compile', function() {
       expect(element.attr('test3')).toBe('Misko');
       expect(element.attr('test4')).toBe('Misko');
     }));
+
+    describe('when an attribute has a dash-separated name', function () {
+
+      it('should work with different prefixes', inject(function($compile, $rootScope) {
+        $rootScope.name = "JamieMason";
+        element = $compile('<span ng:attr:dash-test="{{name}}" ng-Attr-dash-test2="{{name}}" ng_Attr_dash-test3="{{name}}"></span>')($rootScope);
+        expect(element.attr('dash-test')).toBeUndefined();
+        expect(element.attr('dash-test2')).toBeUndefined();
+        expect(element.attr('dash-test3')).toBeUndefined();
+        $rootScope.$digest();
+        expect(element.attr('dash-test')).toBe('JamieMason');
+        expect(element.attr('dash-test2')).toBe('JamieMason');
+        expect(element.attr('dash-test3')).toBe('JamieMason');
+      }));
+
+      it('should work if they are prefixed with x- or data-', inject(function($compile, $rootScope) {
+        $rootScope.name = "JamieMason";
+        element = $compile('<span data-ng-attr-dash-test2="{{name}}" x-ng-attr-dash-test3="{{name}}" data-ng:attr-dash-test4="{{name}}"></span>')($rootScope);
+        expect(element.attr('dash-test2')).toBeUndefined();
+        expect(element.attr('dash-test3')).toBeUndefined();
+        expect(element.attr('dash-test4')).toBeUndefined();
+        $rootScope.$digest();
+        expect(element.attr('dash-test2')).toBe('JamieMason');
+        expect(element.attr('dash-test3')).toBe('JamieMason');
+        expect(element.attr('dash-test4')).toBe('JamieMason');
+      }));
+
+    });
+
   });