I want to wrap some jQuery in angular. So I do this in the link function
$('#slider').slider();
But I am wondering what the difference is to....
$(elem).slider();
Because the second one only 'sort of' works.
3 Answers
The 'elem' variable in your link function is 'made' by angular using jqLite.
From the docs:
jqLite is a tiny, API-compatible subset of jQuery that allows Angular 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.
Comments
This is what is available to an angular element.
https://docs.angularjs.org/api/ng/function/angular.element
I don't advise trying to type an angular element directly to a jquery element. If you really need to do that pull the class and id property off of the angular element and create the jquery one manually.
1 Comment
Mathew Berg
Or... just include jquery as angular uses jqlite but replaces it with jquery if it has it. 'To use
jQuery, simply ensure it is loaded before the angular.js file.'In angularjs directives you dont need to use $(elem).slider(); this is jQuery.
To call the element you just need to type elem.somejqLiteFunc()
Example
.directive('someDirective', function () {
return {
restrict: 'E',
link: function (scope, element, attrs) {
element.on('click', function () {
element.html('You clicked me!');
});
}
};
});
You can see all default jqLite functions in Angular Docs site: https://docs.angularjs.org/api/ng/function/angular.element
elem? An HTMLElement object?