https://gradana.co.id/assets/js/directives/pg-tab.js

1/* ============================================================
2 * Directive: pgTab
3 * Makes Bootstrap Tabs compatible with AngularJS and add sliding
4 * effect for tab transitions. 
5 * ============================================================ */
6
7angular.module('app')
8    .directive('pgTab', ['$parse', function($parse) {
9        return {
10            link: function(scope, element, attrs) {
11                var slide = attrs.slide;
12                var onShown = $parse(attrs.onShown);
13                // Sliding effect for tabs
14                $(element).on('show.bs.tab', function(e) {
15                    e = $(e.target).parent().find('a[data-toggle=tab]');
16
17                    var hrefCurrent = e.attr('href');
18
19                    if ($(hrefCurrent).is('.slide-left, .slide-right')) {
20                        $(hrefCurrent).addClass('sliding');
21
22                        setTimeout(function() {
23                            $(hrefCurrent).removeClass('sliding');
24                        }, 100);
25                    }
26                });
27
28                $(element).on('shown.bs.tab', {
29                    onShown: onShown
30                }, function(e) {
31                    if (e.data.onShown) {
32                        e.data.onShown(scope);
33                    }
34                });
35
36                element.click(function(e) {
37                    e.preventDefault();
38                    $(element).tab('show');
39                });
40            }
41        };
42    }]);