fixup! feat($compile): add support for arbitrary property and event bindings

Author: jbedard

src/ng/compile.js

@@ -2336,7 +2336,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
               directiveNormalize(nodeName), 'E', maxPriority, ignoreDirective);
 
           // iterate over the attributes
-          for (var attr, name, nName, ngAttrName, value, ngPrefixMatch, nAttrs = node.attributes,
+          for (var attr, name, nName, value, ngPrefixMatch, nAttrs = node.attributes,
                    j = 0, jj = nAttrs && nAttrs.length; j < jj; j++) {
             var attrStartName = false;
             var attrEndName = false;
@@ -2349,8 +2349,8 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
             value = attr.value;
 
             // support ng-attr-*, ng-prop-* and ng-on-*
-            ngAttrName = directiveNormalize(name);
-            if ((ngPrefixMatch = ngAttrName.match(NG_PREFIX_BINDING))) {
+            nName = directiveNormalize(name);
+            if ((ngPrefixMatch = nName.match(NG_PREFIX_BINDING))) {
               isNgAttr = ngPrefixMatch[1] === 'Attr';
               isNgProp = ngPrefixMatch[1] === 'Prop';
               isNgEvent = ngPrefixMatch[1] === 'On';
@@ -2361,27 +2361,31 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
                 });
 
             // support *-start / *-end multi element directives
-            } else if ((multiElementMatch = ngAttrName.match(MULTI_ELEMENT_DIR_RE)) && directiveIsMultiElement(multiElementMatch[1])) {
+            } else if ((multiElementMatch = nName.match(MULTI_ELEMENT_DIR_RE)) && directiveIsMultiElement(multiElementMatch[1])) {
               attrStartName = name;
               attrEndName = name.substr(0, name.length - 5) + 'end';
               name = name.substr(0, name.length - 6);
             }
 
-            nName = directiveNormalize(name.toLowerCase());
-            attrsMap[nName] = name;
+            if (isNgProp || isNgEvent) {
+              attrs[nName] = value;
+              attrsMap[nName] = attr.name;
 
-            if (isNgProp) {
-              attrs[ngAttrName] = value;
-              addPropertyDirective(node, directives, ngAttrName, name);
-            } else if (isNgEvent) {
-              attrs[ngAttrName] = value;
-              addEventDirective(directives, ngAttrName, name);
+              if (isNgProp) {
+                addPropertyDirective(node, directives, nName, name);
+              } else {
+                addEventDirective(directives, nName, name);
+              }
             } else {
+              //Update nName for cases where a prefix was removed
+              nName = directiveNormalize(name.toLowerCase());
+              attrsMap[nName] = name;
+  
               if (isNgAttr || !attrs.hasOwnProperty(nName)) {
-                  attrs[nName] = value;
-                  if (getBooleanAttrName(node, nName)) {
-                    attrs[nName] = true; // presence means true
-                  }
+                attrs[nName] = value;
+                if (getBooleanAttrName(node, nName)) {
+                  attrs[nName] = true; // presence means true
+                }
               }
 
               addAttrInterpolateDirective(node, directives, value, nName, isNgAttr);

test/ng/compileSpec.js

@@ -12026,6 +12026,29 @@ describe('$compile', function() {
       expect(element.attr('test3')).toBe('Misko');
     }));
 
+    it('should use the non-prefixed name in $attr mappings', function() {
+      var attrs;
+      module(function() {
+        directive('attrExposer', valueFn({
+          link: function($scope, $element, $attrs) {
+            attrs = $attrs;
+          }
+        }));
+      });
+      inject(function($compile, $rootScope) {
+        $compile('<div attr-exposer ng-attr-title="12" ng-attr-super-title="34">')($rootScope);
+        $rootScope.$apply();
+        expect(attrs.title).toBe('12');
+        expect(attrs.$attr.title).toBe('title');
+        expect(attrs.ngAttrTitle).toBeUndefined();
+        expect(attrs.$attr.ngAttrTitle).toBeUndefined();
+        expect(attrs.superTitle).toBe('34');
+        expect(attrs.$attr.superTitle).toBe('super-title');
+        expect(attrs.ngAttrSuperTitle).toBeUndefined();
+        expect(attrs.$attr.ngAttrSuperTitle).toBeUndefined();
+      });
+    })
+
     it('should work with the "href" attribute', inject(function() {
       $rootScope.value = 'test';
       element = $compile('<a ng-attr-href="test/{{value}}"></a>')($rootScope);
@@ -12270,6 +12293,43 @@ describe('$compile', function() {
       expect(element.attr('asdf')).toBe('foo');
     }));
 
+    it('should use the full ng-prop-* attribute name in $attr mappings', function() {
+      var attrs;
+      module(function() {
+        directive('attrExposer', valueFn({
+          link: function($scope, $element, $attrs) {
+            attrs = $attrs;
+          }
+        }));
+      });
+      inject(function($compile, $rootScope) {
+        $compile('<div attr-exposer ng-prop-title="42">')($rootScope);
+        $rootScope.$apply();
+        expect(attrs.title).toBeUndefined();
+        expect(attrs.$attr.title).toBeUndefined();
+        expect(attrs.ngPropTitle).toBe('42');
+        expect(attrs.$attr.ngPropTitle).toBe('ng-prop-title');
+      });
+    });
+
+    it('should not conflict with (ng-attr-)attribute mappings of the same name', function() {
+      var attrs;
+      module(function() {
+        directive('attrExposer', valueFn({
+          link: function($scope, $element, $attrs) {
+            attrs = $attrs;
+          }
+        }));
+      });
+      inject(function($compile, $rootScope) {
+        $compile('<div attr-exposer ng-prop-title="42" ng-attr-title="foo" title="bar">')($rootScope);
+        $rootScope.$apply();
+        expect(attrs.title).toBe('foo');
+        expect(attrs.$attr.title).toBe('title');
+        expect(attrs.$attr.ngPropTitle).toBe("ng-prop-title");
+      });
+    });
+
     it('should disallow property binding on onclick', inject(function($compile, $rootScope) {
       // All event prop bindings are disallowed.
       $rootScope.onClickJs = function() {};