What I need to enable is that angular bootstrap just works

Question

I included them in my index.html because it includes:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- bower:js --> <script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular-animate/angular-animate.js"></script> <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script> <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script> <!-- endbower --> 

Why is ui-bootstrap.js not included? Since bower.json from bootstrap and its main property set "ui-bootstrap-tpls.js", but what about ui-bootstrap.js?

Even when I include a file outside of bower: js tags, popover from datepicker does not appear and I have no errors in my Chrome.

But when I click the datepicker button, there is no popover ...

UPDATE

Now that I have fixed my angularjs modules, now I only use this: 'ui.bootstrap.datepicker'

Now I get these errors in google chrome:

 Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/template/datepicker/datepicker.html Error: [$compile:tpload] Failed to load template: template/datepicker/datepicker.html 

When I look at the source file ui-bootstrap-tpls.js:

 .directive( 'datepicker', function () { return { restrict: 'EA', replace: true, templateUrl: 'template/datepicker/datepicker.html', scope: { datepickerMode: '=?', dateDisabled: '&' }, 

Where are these path templates above ...? I do not have them. I just installed the angular-bootstrap package. Shouldn't all be included?

UPDATE2

I get this angularjs error:

See parent element is null and therefore parent.InsertBefore cannot work and throws an exception ...

Answer 1

Official document

ui-bootstrap-tpls.js library contains directives and directive templates.

ui-bootstrap.js are just directives, and you must provide directive templates.

Most people use predefined directive templates ( ui-bootstrap-tpls.js ). You do not want to include both, and that may be why popover / datepicker does not work. You will essentially have two directives that show / hide popover / datepicker. Also, do not download the bootstrap.js library, as this will cause the same problems.

UPDATE:

As for the error not found by the template, the datepicker directive looks for the template 'template/datepicker/datepicker.html' in $templatecache . ui-bootstrap-tpls.js injects templates into the template cache at the very end of the js file.

In the ui-bootstrap-tpls.js you should see a few lines of $templatecache.put with 'template/datepicker/datepicker.html' one of them.

Answer 2

Just in case, someone has a different problem: I had problems with datepicker, and the problem was that I downloaded templates before the base JS:

From:

 <script src="/Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script> <script src="/Scripts/angular-ui/ui-bootstrap.min.js"></script> 

To:

 <script src="/Scripts/angular-ui/ui-bootstrap.min.js"></script> <script src="/Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script> 

Answer 3

I just ran into this problem, the answers above helped me a lot!

In my case, I used yo-angular build and installed ui-bootsrap with a gazebo. The problem was multiple ui-bootrap and bootstrap links conflicting with tpls.js verison

Here is my solution: Just put inside my index.html

Delete

 <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script> <script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script> 

Add

 <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script> 

Answer 4

Problem:

This question appears as a result of Google for

 Error: [$compile:tpload] Failed to load template: templates/datetimepicker.html 

This may not be a direct answer to your specific problem, but I wanted to leave a note for future users encountering similar problems.

The daleotts / angular-bootstrap-datetimepicker directive introduces a violation in v1.0.0 :

must include datetimepicker.template.js on the page to load the template. ( b520f515 )

Decision:

Angular-bootstrap-datetimepicker users can either revert to a previous version (for example, v0.40), or choose to include a template file that was previously included in the base .js file:

 // Previously this was the needed file <script type="text/javascript" src="node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.js"></script> // Users who wish to use the default datetimepicker templates must now also include this file <script type="text/javascript" src="node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.templates.js"></script>