[AngularJS] Link function

Link function is the best spot to do any DOM manipulation or logic functionality for your directive! Normally, we use jQuery and we know that, jQuery selector will search all the DOM element which is experience.

jQuery: 

angular.module('NoteWrangler')
    .directive("nwCard", function(){
        return {
            link: function(){
                $("div.card").on("click", function(){
                    $("div.card p").toggleClass("hidden");
                })
            }
        }
    })

 

Link function can accpet params, one of which are 'element' which point to the element of this directive. By using 'element', we are no longer searching the DOM!

angular.module('NoteWrangler')
    .directive("nwCard", function(){
        return {
            link: function(scope, element, attrs){
                element.on("click", function(){
                    element("div.card p").toggleClass("hidden");
                })
            }
        }
    })

 

'attrs' param: