All geek questions in one place

Angular UT Bootstrap just doesn't do anything (no errors, doesn't work)

I am trying to use Angular UI Bootstrap:

I have done the following:

  • Install it with a gazebo: bower install angular-bootstrap
  • Include it in js: var myapp = angular.module('myApp', [ 'ui.bootstrap' ]);
  • Add styles: .nav, .pagination, .carousel, .panel-title a { cursor: pointer; } .nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

Bootstrap 3 CSS is included, angular.element.fn.jquery returns "2.1.4", so it should not use jqlite.

When I add, for example:

 <a href="#" tooltip-placement="left" uib-tooltip="On the Left!">Whatever</a>

Nothing happens in my template. When I add other bootstrap ui examples, it also does nothing. No javascript errors. My version of angular.js is 1.4.1.

What else could I do wrong? Do I have to do something with my controller?

+5
source share
2 answers

Make sure you are using the latest version of ui-bootstrap. I am adding this answer as a quick reference for anyone who has this problem:

Tooltip attribute (directive) changed from tooltip to ui-bootstrap 0.13.X to uib-tooltip from version 0.14.0 and higher.

If for some reason you cannot use the latest version (currently 1.2.X), use the tooltip directive and always check the documents for your version of ui-bootstrap at:

ui bootstrap

+2
source

Make sure the bell package (if that's what you are using)

angular-bootstrap

and nothing else; there is something bad.

By looking at your example page, you can include scripts for angular and ui-bootstrap:

 <head> <script type="text/javascript" src="lib/angular/angular.js"></script> <script type="text/javascript" src="lib/angular-resource/angular-resource.js"></script> <script type="text/javascript" src="lib/angular-route/angular-route.js"></script> <script type="text/javascript" src="lib/angular-touch/angular-touch.js"></script> <script type="text/javascript" src="lib/angular-animate/angular-animate.js"></script> <script type="text/javascript" src="lib/angular-bootstrap/ui-bootstrap.js"></script> </head> <!-- Bootstrap --> <link href="lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="lib/bootswatch/yeti/bootstrap.min.css" rel="stylesheet" /> <!-- Custom stylesheet --> <link href="css/main.css" rel="stylesheet" />

Then check for JS errors in the web browser console (I use Chrome).

0
source

Source: https://habr.com/ru/post/1233346/

More articles:


All Articles