An example copied directly from
http://angular-ui.github.io/bootstrap/
Does not work at all, neither locally nor in plunker. Don't know why. Bootstrap CSS is loaded, so is ui-bootstrap-tpls.min.js and angular.min.js (angular itself is working just fine though).
Here's the plunker:
http://plnkr.co/edit/15GWWFSUwab4VmaxfFPf
I am getting no js errors in a browser, yet it's not working.
Please help. I need to get this working on my website (i.e. the accordion doesn't work even when I write my own html/js code).
A plunker created from the demo site works flawlessly, just created a plunker from the demo site: http://plnkr.co/edit/z9RQKgNBTRbigyQs7OGW?p=preview
In your plunker you are not declaring dependency on the ui.bootstrap module as described on the very top of the demo page:
As soon as you've got all the files downloaded and included in your
page you just need to declare a dependency on the ui.bootstrap module:
angular.module('myModule', ['ui.bootstrap']);
After adding a dependency on the mentioned module your plunker works as well:
http://plnkr.co/edit/00bK0rNDYIrH9a9TVRk3?p=preview
One more thing - you need at least AngularJS 1.0.5 - there were bugs in earlier versions of AngularJS that prevented this directive from working correctly.
Related
The code from official website is not working, getting blank at Plunker, only two places modified:
script.js, var module = angular.module to var m = angular.module
as Plnkr complains about "Redefinition of module".
index.html, explicitly declare height for gridOptions.
You have <script src="scripts.js"></script> when your file is named script.js
Make sure the file reference is the same as in this plnkr
As a side note, it is best to debug your applications by tackling the errors in the order that they appear, sometimes fixing the 404 not found will fix anything that angular wants to complain about...
I am using AngularJS v1.6.3 and am trying to find a version of UI.bootstrap that works with it (in terms of Bootstrap's Javascript functionality, such as popover).
This Plunker uses UI.Bootstrap v0.12.0 and the popover works:
http://plnkr.co/edit/6ris13k1kZCGLvO7CP4B?p=preview
This Plunker uses UI.Bootstrap v2.5.0 and the popover does not work:
http://plnkr.co/edit/NS8OLrKXCfKdHrQ8TRwK?p=preview
This is the popover code that does not work in the latter:
<p>Click me and see popover on the right.</p>
I suspect I am doing something wrong. Thanks!
In newer versions of Angular UI Bootstrap, the directive name has been changed from popover to uib-popover. This is a fork of your 2nd Plunker in which the popover is displayed on the right of the link.
You can find the new directive name here
Plunker: http://plnkr.co/edit/Sjfb3Esx1NsjwaYGLMGZ?p=preview
Accordion is in the servers tab.
The plunker actually works. My real app does not. The only thing that plunker is not really replicating is the ui-router stuff. On my actual app the accordion won't open. Other questions on SO say that ui.bootstrap is not included and that fixed their problem. I do have ui.bootstrap included though.
I've also tried copying and pasting the example from http://angular-ui.github.io/bootstrap/ that doesn't work either.
I'm at a loss for what else to look for.
More info:
I'm not getting any errors. Also other ui-bootstrap directives work just fine. I'm using tabs on this same page, and modal and dropdown work on other pages.
there is an issue with some version of angular-ui, the js assumes that one atleast one accordion is open and tries to calculate width. But bootstrap hides all accordions. So try displaying one accordion through css, i.e. set the display property of the accordion.
As per my comment:
It's my template. Somehow my template files are out of sync with the js files. In the template it is calling ng-click="toggleOpen()" which does not exist in my code. When I roll that back to ng-click="isOpen = !isOpen" everything works as expected. I need to figure out why my templates and js files are out of sync.
I installed ui-bootstrap using bower which does not include template files. I need to disable template caching during development so I can't use the tpls code. I downloaded the template directory from github and some of the templates simply do not match up with the version of code that bower downloads. I updated the template file to an older version that correctly matches the code from bower. Everything works now.
I have been trying to wire up AngularUI to Bootstrap 3 to no avail. I grabbed the appropriate AngularUI code from the bootstrap 3 branch here:
https://github.com/angular-ui/bootstrap/tree/bootstrap3_bis2
I picked the AngularUI tooltip directive as an easy "test-case" to see if I can get it all wired up.
There error I am receiving is:
Uncaught Error: No module: ui.bootstrap
I've shared a dropbox link with src code below.
Views/Home/index.cshtml contains the markup with references to angularjs and bootstrap
js/directives contains the only directive I am currently testing out which is the "tooltip" directive.
Dropbox link with src code
https://www.dropbox.com/sh/elwn0su5qwnqa27/zetaMxAa4Q
Instead of my having to download the bootstrap 3 directives and place them manually in my project, is there now a CDN available for AngularUI-Bootstrap3 directives like there is for AngularUI-Bootstrap2?
Thanks for any help,
V/R
Chris
It's because you try to extract only one part of AngularUI sources, not compiled version.
So you lack the module declaration for 'ui.bootstrap' (and surely other pieces).
As Bootstrap 3 compatibility is not done, there is no compiled version (and no more CDN) for this AngularUI version.
You have to get all sources from branch bootstrap3_bis2, and build them with grunt. It's explain in project README (Contributing to the project > Build).
It will generate 2 JS files (one is minified and the other is not) you have to include one of them to your page and it will works correctly.
I'm using AngularJS with requireJS with angularstrap. Right now I simply want to get a datepicker working in my modal box which also uses angularstrap and bootstrap but I keep recieving the error:
Cannot read property 'dates' of undefined
myctrl1.js is the file that downloads datepicker.js and I have all my dependancies in main.js listed. I have never been able to get what should be a fairly simple thing to work so posting here is my last resort.
Plunkr here: LINK
Main files are index.html, controllers.js, myctrl.js
I had the same issue when using jQueryUI. This datepicker is incompatible with jQueryUI datepicker (both use datepicker name), so you should remove jQueryUI from your code or do some namespace workaround.
Perhaps you forgot add bootstrap-datepicker.js on your page. I had same problem and this was solution.