Change the folder location for Angular ui-bootstrap templates

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

The error I am getting is:

  • Angular js - route-ui add default parmeter
  • AngularJS UI-Router multiple states with same URL
  • ui-router nested views and passing variable
  • Value is not binding with scope's variable if used inside uib-tabset
  • Karma + ui-router fails: Cannot read property 'isDefined' of undefined
  • AngularJs templates not loading in internet explorer 8
  • 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?

  • AngularJS/ng-grid - Updating array with splice doesn't updates UI
  • Ui mask value not matching ng model
  • Angular JS render JSON in tree like format
  • Initialization of 2 datepickers very slow
  • How to change the URL when paging using UI Router?
  • AngularJS: How to validate date in US format?
  • 3 Solutions collect form web for “Change the folder location for Angular ui-bootstrap templates”

    Per this issue on github, the templateUrl is not configurable. You could change the templateUrl property in each directive definition

    .directive('accordion', function () {
        return {
            restrict:'EA',
            controller:'AccordionController',
            transclude: true,
            replace: false,
            templateUrl: 'template/accordion/accordion.html'
     };
    

    but that would be brittle and hard to maintain. Unfortunately, it doesn’t look like they’re going to make this configurable – but the thread is an interesting read.

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

    Another alternative without changing code is to add some sort of virtual server directory that maps /Place/template to your actual location of /js/app/template/

    The implementation of virtual directories is obviously in your server platform of choice.