How to define javascript inside directive template

Link Function

We use the link option to create a directive that manipulates the DOM. The link function is optional. If the compile function is defined, it returns the link function; therefore, the compile function will overwrite the link function when both are defined. If our directive is simple and doesn’t require setting any additional options, we may return a function from the factory function (callback function) instead of an object. When doing so, this function will be the link function.

The link function has the following signature:

link: function (scope, element, attrs) {

// manipulate the DOM in here

}

scope

The scope to be used by the directive for registering watches from within the directive.

element

The instance element is the element where the directive is to be used. We should only manipulate children of this element in the postLink function, since the children have already been linked.

attrs

The instance attributes are a normalized (pascalCased) list of attributes declared on this element and are shared between all directive linking functions. These are passed as JavaScript objects.

You can use JQuery within the link function for manipulating the DOM like as shown in the example

Working Demo

app.directive('basictabs', function() {
    return {
        restrict: 'AE',
        replace: true,
        template: '<div id="tabs">\
            <ul>\
                <li><a href="#tabs-1">Tab 1</a></li>\
                <li><a href="#tabs-2">Tab 2</a></li>\
                <li><a href="#tabs-3">Tab 3</a></li>\
            </ul>\
            <div id="tabs-1">\
                <p>Content for Tab 1</p>\
            </div>\
            <div id="tabs-2">\
                <p>Content for Tab 2</p>\
            </div>\
            <div id="tabs-3">\
                <p>Content for Tab 3</p>\
            </div>\
          </div>',
        link: function(scope, elm, attrs) {
            var jqueryElm = $(elm[0]);
            $(jqueryElm).tabs()
        }
    };
})