jQuery v4 Compatibility

AngularJS exposes the angular.element() API. It wraps a raw DOM element or HTML string as a jQuery element.

If jQuery is available, angular.element() is an alias for the jQuery function. If jQuery is not available, angular.element() delegates to AngularJS's built-in subset of jQuery, called "jQuery lite" or jqLite.

jqLite is a tiny, API-compatible subset of jQuery that allows AngularJS to manipulate the DOM in a cross-browser compatible way. jqLite implements only the most commonly needed functionality with the goal of having a very small footprint.

Since there are some differences in the behavior of some of the methods between jQuery version <4 and jQuery version >=4, jqLite can be configured to be compatible with either via the angular.jqLite_jQueryLt4CompatibilityEnabled() function, introduced in AngularJS NES v1.9.7 / v1.5.23.

angular.jqLite_jQueryLt4CompatibilityEnabled()

The angular.jqLite_jQueryLt4CompatibilityEnabled() function can be used both as a getter and as a setter.

Using as a Getter

When calling the function without any argument, it acts as a getter and returns the current value of the setting. In other words, it returns true, if jqLite is configured to be compatible with jQuery version >=4, or false otherwise.

In AngularJS NES versions 1.9.7 and 1.5.23, the default value is true, meaning that jqLite is, by default, configured to be compatible with jQuery versions <4.

Using as a Setter

When used as a setter, the function expects one boolean argument and enables/disables jqLite compatibility with jQuery versions <4.

Here is a list of jqLite behavior differences in the two modes:

• attr() method:
  • In jQuery <4 compatibility mode:
    • When used as a getter with some boolean attributes, it returns the lowercase attribute name (if the attribute is present).
    • When used as a setter with some boolean attributes, it sets the value to the lowercase attribute name (regardless of the value passed as argument).
    • When used as a setter with some boolean attributes and passed false as the value, it removes the attribute from the element.
  • In jQuery >=4 compatibility mode:
    • There is no special handling, when getting or setting any boolean attributes.
    • When used as a setter and passed false as the value, it removes the attribute from the element. The only exceptions are aria-* attributes, which are set to false instead.

When to Use

Keep in mind that this function only affects the behavior of AngularJS' jqLite. If your application uses jQuery, then this function has no effect and there is no reason to use it.

If your application does use jqLite and has code (or plugins) that expect behavior compatible with jQuery versions <4, then enable jqLite compatibility with jQuery <4:

angular.jqLite_jQueryLt4CompatibilityEnabled(true);

If, on the other hand, your application uses jqLite and you plan to use jQuery v4 in the future or want your application to be ready for the transition, disable jqLite compatibility with jQuery <4, thus making jqLite's behavior compatible with jQuery >=4:

angular.jqLite_jQueryLt4CompatibilityEnabled(false);