I'm currently testing out angular bootstrap-UI
locally on my machine. When I try to recreate the example of accordion and dialog box. I get this error message in my console saying that template is missing.
Example of error: 404 Not Found - localhost/angular/template/message.html
When I look into ui-bootstrap-0.1.0.js
the directive have a template URL
.
What's the purpose of the templateURL
for the directive?
Are those template suppose to be included when I download the whole angular bootstrap-UI
zip file?
Am I missing other files that I should have include in my header?
<link rel="stylesheet" href="includes/css/bootstrap.css"> <script src="includes/js/angular.js"></script> <script src="includes/js/ui-bootstrap-0.1.0.js"></script>
You have two choices:
If you don't want to make your own templates and want the built in ones, you should download the ui-bootstrap-tpls-0.1.0.js
file - this injects all the templates so they are pre-cached into your app: https://github.com/angular-ui/bootstrap/blob/gh-pages/ui-bootstrap-tpls-0.1.0.js#L1322
If you do want to make some of your own templates, create a templates
folder in your app, and download the templates from the angular-ui/bootstrap project. Then overwrite the ones you want to customize on your own.
Read more here: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files
edit:
You can also download bootstrap-tpls.js and still overwrite some of the directive's templateUrls with your own, using an AngularJS decorator to change the directive's templateUrl. Here's an example that change's datepicker's templateUrl:
http://docs.angularjs.org/api/AUTO.$provide#methods_decorator
myApp.config(function($provide) { $provide.decorator('datepickerDirective', function($delegate) { //we now get an array of all the datepickerDirectives, //and use the first one $delegate[0].templateUrl = 'my/template/url.html'; return $delegate; }); });
My 5 cents after wasting 2 hours with this problem. You should:
custom.tpls.js
in my case it was ui-bootstrap-custom-0.10.0.min.js
'ui.bootstrap.yourfeature'
in my case it was 'ui.bootstrap.modal'
and also include 'ui.bootstrap.tpls'
. So my module complete depencies look like this:
var profile = angular.module("profile",[ 'ui.bootstrap.modal', 'ui.bootstrap.tpls' ]);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With