CODEWITHSUNDEEP
angularjsangular-uiangular-ui-bootstrapbower
Elisabeth
Elisabeth

Reputation: 21206

What do I need to include that angular bootstrap just simply works

I have included these in my index.html because bower is including them:

<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 the ui-bootstrap.js not included? Because the bower.json from bootstrap and its main property has set "ui-bootstrap-tpls.js" but what about the ui-bootstrap.js?

Even when I include the file outside of the bower:js tags the popover from the datepicker is not visible and I get NO errors in my google chrome.

But when I click on the datepicker button no popover...

UPDATE

Now that I corrected my angularjs modules, now I use just this: 'ui.bootstrap.datepicker'

I get now 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 ui-bootstrap-tpls.js file:

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

Where are these above path template... ? I have them not here. I just installed the angular-bootstrap bower package. Should there not all be included?

UPDATE2

I get these angularjs error now:

enter image description here

See the parent is null and therefore the parent.InsertBefore can not work and throws the exception...

Upvotes: 5

Views: 23694

Answers (4)

Alex Johnson
Alex Johnson

Reputation: 1574

Problem:

This questions comes up as a Google result 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 directive daleotts/angular-bootstrap-datetimepicker introduces a breaking change in v1.0.0:

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

Solution:

Users of angular-bootstrap-datetimepicker can either roll back to a previous version (such as v0.40), or choose to include templates 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>

Upvotes: 2

Rob J
Rob J

Reputation: 6629

Official Doc

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

ui-bootstrap.js is just the directives and you are expected to supply the directive templates.

Most folks use the predefined directive templates (ui-bootstrap-tpls.js). You do not want to include both and that may be why the popover/datepicker is not working. You would essentially have 2 directives working to show/hide the popover/datepicker. Also, do not load the bootstrap.js library as that will cause the same problems.

UPDATE:

In regards to the template not found error, the datepicker directive is looking for the template 'template/datepicker/datepicker.html' in the $templatecache. The ui-bootstrap-tpls.js injects the templates into the template cache at the very end of the js file.

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

Upvotes: 18

Sako73
Sako73

Reputation: 10137

Just in case someone else is having the same issue: I was having problems with the datepicker, and the issue was that I was loading the 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>

Upvotes: 13

James
James

Reputation: 51

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

In my instance I was using a yo-angular build, and installed ui-bootsrap with bower. The problem was multiple references to ui-bootrap and bootstrap conflicting with the tpls.js verison

Here is my solution: Simply put within my index.html

Remove

<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>

Upvotes: 2

Related Questions