Adding ng-jq functionality, the ability to force jqLite or any other library by name to be used for angular.element

Author: Michel Boudreau

src/Angular.js

@@ -899,7 +899,35 @@ var csp = function() {
   return (csp.isActive_ = active);
 };
 
+/**
+ * @ngdoc directive
+ * @name ng.directive:ngJq
+ *
+ * @element html
+ * @param {string} (optional) the name of the library available under `window` to be used for angular.element
+ *
+ * @description
+ *
+ * Use this directive to force the angular.element library.  This should be used to force
+ * either jqLite by leaving ng-jq blank or setting the name of the jquery variable under window
+ * (eg. jQuery).
+ *
+ * This directive is global for the whole of the angular library, hence the directive can only
+ * be added to the top-most HTML element.
+ *
+ */
+var jq = function() {
+  if (isDefined(jq.name_)) return jq.name_;
 
+  var el = document.querySelector('[ng-jq]') || document.querySelector('[data-ng-jq]');
+  var name = undefined;
+
+  if (el) {
+    name = el.getAttribute('ng-jq') || el.getAttribute('data-ng-jq') || '';
+  }
+
+  return (jq.name_ = name);
+};
 
 function concat(array1, array2, index) {
   return array1.concat(slice.call(array2, index));
@@ -1472,7 +1500,9 @@ function bindJQuery() {
   }
 
   // bind to jQuery if present;
-  jQuery = window.jQuery;
+  var jqName = jq();
+  jQuery = jqName !== undefined ? window[jqName] : window.jQuery;
+
   // Use jQuery if it exists with proper functionality, otherwise default to us.
   // Angular 1.2+ requires jQuery 1.7+ for on()/off() support.
   // Angular 1.3+ technically requires at least jQuery 2.1+ but it may work with older

test/AngularSpec.js

@@ -615,6 +615,58 @@ describe('angular', function() {
   });
 
 
+  describe('jq', function() {
+    var element, fakeQuery;
+
+    beforeEach(function() {
+      element = document.createElement('html');
+    });
+
+    afterEach(function() {
+      jq.name_ = undefined;
+      delete jq.name_;
+    });
+
+    it('should return undefined when jq is not set, no jquery found (the default)', function() {
+      expect(jq()).toBe(undefined);
+    });
+
+    it('should return empty string when jq is enabled manually via [ng-jq] with empty string', function() {
+      element.setAttribute('ng-jq', '');
+      spyOn(document, 'querySelector').andCallFake(function(selector) {
+        if (selector == '[ng-jq]') return element;
+      });
+      expect(jq()).toBe('');
+    });
+
+    it('should return empty string when jq is enabled manually via [data-ng-jq] with empty string', function() {
+      element.setAttribute('data-ng-jq', '');
+      spyOn(document, 'querySelector').andCallFake(function(selector) {
+        if (selector == '[data-ng-jq]') return element;
+      });
+      expect(jq()).toBe('');
+      expect(document.querySelector).toHaveBeenCalledWith('[data-ng-jq]');
+    });
+
+    it('should return "jquery" when jq is enabled manually via [ng-jq] with value "jquery"', function() {
+      element.setAttribute('ng-jq', 'jQuery');
+      spyOn(document, 'querySelector').andCallFake(function(selector) {
+        if (selector == '[ng-jq]') return element;
+      });
+      expect(jq()).toBe('jQuery');
+    });
+
+    it('should return "jquery" when jq is enabled manually via [data-ng-jq] with value "jquery"', function() {
+      element.setAttribute('data-ng-jq', 'jQuery');
+      spyOn(document, 'querySelector').andCallFake(function(selector) {
+        if (selector == '[data-ng-jq]') return element;
+      });
+      expect(jq()).toBe('jQuery');
+      expect(document.querySelector).toHaveBeenCalledWith('[data-ng-jq]');
+    });
+  });
+
+
   describe('parseKeyValue', function() {
     it('should parse a string into key-value pairs', function() {
       expect(parseKeyValue('')).toEqual({});