how to use twitter bootstrap javascript component in angularjs

Question

I want to use tootltip of twitter bootstrap in my angularjs web app. when I use them simply in my code and put the jQuery initialization on top of my js file inside document.ready it works perfectly.

$( document ).ready(function(){
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    });
    $('.myslider').myslider();
});

var myapp = angular.module("eplApp",['ui.router']);

but when I use them in view by ui-routing. It stops working with no error in console.. i am also using more javascript components like crousel. I would like to know how to intialize/call them in view ad document.ready doesn't work in views.

should I initialize them in my controller. if yes than how?

Possible duplicate of Angularjs: Directive With Bootstrap Tooltip — Vaibhav Bansal
– Vaibhav Bansal, Commented Nov 18, 2017 at 7:15

Vaibhav Bansal · Accepted Answer · 2017-11-18 07:13:14Z

0

If you want to use Bootstrap UI in Angular, it would be a better idea to use Angular Module ui.bootrap found here

While you can always create your own angular directives for bootstrap tooltips, this is a quicker way out.

var myapp = angular.module("eplApp",['ui.router','ui.bootstrap']);

and in your HTML

<button tooltip-placement="{{placement.selected}}" uib-tooltip="On the {{placement.selected}}" type="button" class="btn btn-default">Tooltip text</button>

Changing routes using ui.router will not fire $document.ready() again. If the state is loaded after $doucment.ready() is called, your code will not work. If you do not wish to include ui.bootstrap, create a directive and initialize tooltip using $('[data-toggle="tooltip"]').tooltip() in the link function of your directive.

edited Nov 18, 2017 at 7:13

answered Nov 18, 2017 at 6:55

Vaibhav Bansal

3461 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to use twitter bootstrap javascript component in angularjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related