Change the folder location for Angular ui-bootstrap templates

Question

I am trying to use ui-bootstrap.min.js with the external templates.

The error I am getting is:

http://localhost:13132/Place/template/timepicker/timepicker.html 404 (Not Found) 

I would like for every page, for every template, it to look for my templates under:

http://localhost:13132/js/app/template/...

but I cannot seem to find where I could change the location where this is pointing to.

Anyone know how to make this change?

Answer 1

This can be handled using $provide.decorator

Read more about this issue: https://github.com/angular-ui/bootstrap/issues/743

myApp.config(function($provide) {
  $provide.decorator('datepickerDirective', function($delegate) {
    //array of datepicker directives
    $delegate[0].templateUrl = "my/datepicker.html";
    return $delegate;
  });
});

Update: I've tested this solution and it does work for other templates as well, and only requires those small changes to app.js. I've tested this now with timepicker.html and day.html, defining a decorator for timepickerDirective and daypickerDirective. The latter is used to override the calendar table display. The templateUrl path is relative to your app folder, in my case it was "partials/fragments/day.html".