element vs. this in AngularJS Directives

Question

Once jQuery is included in Angular, inside directives one is free to use both $(element) and $(this) for DOM manipulations.

What is the difference between them? Is one recommended over the other? Are they interchangeable?

Answer 1

$(this) will depend on the context of the method being executed, $(element) will always refer to the the directive is attached to.

here's a contrived example

module.directive('myDirective', [function() {
    return {
        template: '<div><button id="btn">Click Me</button></div>',
        restrict: 'E',
        link: function(scope, element, attrs, controller) {
                $("#btn").on('click', function() {
                    // $(this) != $(element)
                    // $(this) is the button element from the template
                    // $(element) is the directive element
                });
            }
        }
}]);

Answer 2

Since angular js is using jqlite(a minimal version of jquery)under the hoods for selectors,it may be the same in angular js also with different name.

Refer: AngularJS DOM selector