Bootstrap Tapdrop jQuery in angular.js controller

Question

I saw Bootstrap Tapdrop library and it is perfect for dropdown in my responsive tabs. My app works with angular.js, but add the bootstrap-tapdrop.js in my index.html .

I want to call:

$('.nav-tabs').tabdrop({align:'left'});

into my angularjs app but nothing works. However, when I call this from chrome console works ok.

How can I add this sentence jQuery angular.js my driver? is there anyway? or..how can I use this library from angular.js? I have sought similar things in angular but can not find.

Thanks

Answer 1

You have to create a directive in order to use jQuery plugins or whenever you want to attach client side behavior to elements using jQuery or any third party plugins.

Try something like this.

angular.module('main')
  .directive('my-tabs-directive', [ function ($timeout, $sce) {
      return {
        restrict: 'E',
        link: function (scope, element, attrs) {
          //Write any plugin logic here
          element.tabdrop({align: 'left'});
        },
        templateUrl: 'passYourTemplateUrl'//You can also use inline template
      };
    }
  ]);

You can understand more about angularJs directive here https://docs.angularjs.org/guide/directive