fix(directives): make directive names case-insensitive

+ tests
+ added docs for angular.directive

4 files changed, 44 insertions, 2 deletions

diff --git a/src/Angular.js b/src/Angular.js
index ab031049..f1eb74ca 100644
--- a/src/Angular.js
+++ b/src/Angular.js
@@ -105,7 +105,7 @@ var _undefined        = undefined,
     /** @name angular.attrMarkup */
     angularAttrMarkup = extensionMap(angular, 'attrMarkup'),
     /** @name angular.directive */
-    angularDirective  = extensionMap(angular, 'directive'),
+    angularDirective  = extensionMap(angular, 'directive', lowercase),
     /** @name angular.widget */
     angularWidget     = extensionMap(angular, 'widget', shivForIE),
     /** @name angular.filter */
diff --git a/src/Compiler.js b/src/Compiler.js
index 12736db7..0411c70d 100644
--- a/src/Compiler.js
+++ b/src/Compiler.js
@@ -287,6 +287,7 @@ Compiler.prototype = {
         });
       });
       eachAttribute(element, function(value, name){
+        name = lowercase(name);
         fn = directiveFns[name];
         if (fn) {
           element.addClass('ng-directive');
diff --git a/src/directives.js b/src/directives.js
index a806e928..ee88e2a5 100644
--- a/src/directives.js
+++ b/src/directives.js
@@ -1,7 +1,7 @@
 'use strict';
 
 /**
- * @ngdoc overview
+ * @ngdoc function
  * @name angular.directive
  * @description
  *
@@ -39,6 +39,24 @@
  * For more information about how Angular directives work, and to learn how to create your own
  * directives, see {@link guide/dev_guide.compiler.directives Understanding Angular Directives} in
  * the Angular Developer Guide.
+ *
+ * @param {string} name Directive identifier (case insensitive).
+ * @param {function(string, Element)} compileFn Also called "template function" is a function called
+ *    during compilation of the template when the compiler comes across the directive being
+ *    registered. The string value of the element attribute representing the directive and
+ *    jQuery/jqLite wrapped DOM element are passed as arguments to this function.
+ *
+ *    The `compileFn` function may return a linking function also called an instance function.
+ *    This function is called during the linking phase when a Scope is being associated with the
+ *    template or template clone (see repeater notes below). The signature of the linking function
+ *    is: `function(Element)` where Element is jQuery/jqLite wrapped DOM Element that is being
+ *    linked.
+ *
+ * The biggest differenciator between the compile and linking functions is how they are being called
+ * when a directive is present within an {@link angular.widget.@ng:repeat ng:repeat}. In this case,
+ * the compile function gets called once per occurence of the directive in the template. On the
+ * other hand the linking function gets called once for each repeated clone of the template (times
+ * number of occurences of the directive in the repeated template).
  */
 
 /**
diff --git a/test/AngularSpec.js b/test/AngularSpec.js
index 7831539d..299bfb8a 100644
--- a/test/AngularSpec.js
+++ b/test/AngularSpec.js
@@ -427,6 +427,29 @@ describe('angular', function() {
     });
   });
 
+
+  describe('directive', function() {
+    it('should register directives with case-insensitive id', function() {
+      angularDirective('ALLCAPS', function(val, el) {el.text('+' + val + '+')});
+      angularDirective('lowercase', function(val, el) {el.text('-' + val + '-')});
+
+      var el = jqLite('<div>' +
+                        '<span allcaps="xx1"></span>' +
+                        '<span ALLcaps="xx2"></span>' +
+                        '<span ALLCAPS="xx3"></span>' +
+                        '<span lowerCASE="XX4">xx4</span>' +
+                      '</div>');
+      compile(el);
+      expect(lowercase(sortedHtml(el))).toBe('<div>' +
+                                                '<span allcaps="xx1">+xx1+</span>' +
+                                                '<span allcaps="xx2">+xx2+</span>' +
+                                                '<span allcaps="xx3">+xx3+</span>' +
+                                                '<span lowercase="xx4">-xx4-</span>' +
+                                              '</div>');
+    });
+  });
+
+
   describe('isDate', function() {
     it('should return true for Date object', function() {
       expect(isDate(new Date())).toBe(true);