feat($compile): Allow late binding attributes

Sometimes is not desirable to use interpolation on attributes because
the user agent parses them before the interpolation takes place. I.e:

<svg>
  <circle cx="{{cx}}" cy="{{cy}}" r="{{r}}"></circle>
</svg>

The snippet throws three browser errors, one for each attribute.

For some attributes, AngularJS fixes that behaviour introducing special
attributes like ng-href or ng-src.

This commit is a more general solution that allows prefixing any
attribute with "ngAttr", "ng-attr-", "ng:attr:" or "ng_attr_"  so it will
be set only when the binding is done. The prefix is then removed.

I.e:
<svg>
  <circle ngAttrCx="{{cx}}" ng-attr-cy="{{cy}}" ng:Attr:r="{{r}}"></circle>
</svg>

Closes angular#1925

Author: lrlopez

docs/content/guide/directive.ngdoc

@@ -484,7 +484,8 @@ link() or compile() functions - is a way of accessing:
 
   * *normalized attribute names:* Since a directive such as 'ngBind' can be expressed in many ways
     such as 'ng:bind', or 'x-ng-bind', the attributes object allows for normalized accessed to
-    the attributes.
+    the attributes. Also, if the attribute is prefixed with 'ngAttr', 'ng-attr-', 'ng:attr:' or
+    'ng_attr_' the prefix will be removed once the attribute is evaluated, allowing late binding.
 
   * *directive inter-communication:* All directives share the same instance of the attributes
     object which allows the directives to use the attributes object as inter directive

src/ng/compile.js

@@ -156,7 +156,8 @@ function $CompileProvider($provide) {
       COMMENT_DIRECTIVE_REGEXP = /^\s*directive\:\s*([\d\w\-_]+)\s+(.*)$/,
       CLASS_DIRECTIVE_REGEXP = /(([\d\w\-_]+)(?:\:([^;]+))?;?)/,
       MULTI_ROOT_TEMPLATE_ERROR = 'Template must have exactly one root element. was: ',
-      urlSanitizationWhitelist = /^\s*(https?|ftp|mailto):/;
+      urlSanitizationWhitelist = /^\s*(https?|ftp|mailto):/,
+      NG_ATTR_DIRECTIVE_REGEXP = /^((x-|data-)?ng[-,:,_]?attr[-,:,_]?)(.+)/i;
 
 
   /**
@@ -519,6 +520,10 @@ function $CompileProvider($provide) {
             attr = nAttrs[j];
             if (attr.specified) {
               name = attr.name;
+              // support late binding attributes
+              if(NG_ATTR_DIRECTIVE_REGEXP.test(name)) {
+                name = NG_ATTR_DIRECTIVE_REGEXP.exec(name)[3]; 
+              }
               nName = directiveNormalize(name.toLowerCase());
               attrsMap[nName] = name;
               attrs[nName] = value = trim((msie && name == 'href')

test/ng/compileSpec.js

@@ -2498,4 +2498,26 @@ describe('$compile', function() {
       });
     });
   });
+
+  describe('late binding attributes', function() {
+
+    it('should bind after digest but not before', inject(function($compile, $rootScope) {
+      $rootScope.name = "Misko";
+      element = $compile('<span ng-attr-test="{{name}}"></span>')($rootScope);
+      expect(element.attr('test')).toBeUndefined();
+      $rootScope.$digest();
+      expect(element.attr('test')).toBe('Misko');
+    }));
+
+    it('should work with different prefixes', inject(function($compile, $rootScope) {
+      $rootScope.name = "Misko";
+      element = $compile('<span ngAttrTest="{{name}}" ng:attr:test2="{{name}}"></span>')($rootScope);
+      expect(element.attr('test')).toBeUndefined();
+      expect(element.attr('test2')).toBeUndefined();
+      $rootScope.$digest();
+      expect(element.attr('test')).toBe('Misko');
+      expect(element.attr('test2')).toBe('Misko');
+    }));    
+  });
+
 });