modifying ng-include directive

StackOverflow https://stackoverflow.com/questions/23413368

  •  13-07-2023
  •  | 
  •  

Question

if I host an angular app at some custom location e.g. http://localhost/collosys then i have to change all the ng-include to have "/collosys/" for all the addresses, given that i am using absolute address for referring to any html file.

this is how i am doing that currently

<script>
    var baseUrl = document.location.pathname;
    document.write('<base href="' + document.location.pathname + '" />');
</script>

and then in rewrite ng-include tag

FROM: <div data-ng-include="'/Generic/csgrid/grid-buttons.html'"></div>
TO: <div data-ng-include=" baseUrl + 'Generic/csgrid/grid-buttons.html'"></div>

Can i modify the ng-include tag itself, so that it can prefix all the addresses with the hosting address

EDIT

I read somewhere that angularjs directives are extensible, any example on how to extend angularjs ngInclude directives?? any examples??

Was it helpful?

Solution

I solved this issue using $httpProvider.interceptors. The following prepends 'myAppDirectory' to ALL requests.

$httpProvider.interceptors.push(function($q) {
    return {
     'request': function(config) {
         config.url = 'myAppDirectory/'+config.url;
         return config;
      },
    };
  });

A regular ng-include, such as:

<div ng-include="'user/info.html'">

Will load myAppDirectory/user/info.html

You probably want to make some exceptions. In my case:

  $httpProvider.interceptors.push(function() {
    return {
     'request': function(config) {
         // ignore api calls and ui-bootstrap templates.
         if (config.url.indexOf('api')==-1 && config.url.indexOf('template')==-1) {
           config.url = 'myAppDirectory/'+config.url;
         }
         return config;
      },
    };
  });

OTHER TIPS

You have several options as previously mentioned:

  1. Change angular source code (also known as monkey patching) - not recommended, requires high maintenance and makes your code unreadable for other people.

  2. Use a decorator, which allows you to get the ngInclude directive and change it. Decorators are often used to extend\change 3rd party libs, but the downside is that you'll have to replace the entire compile function of ngInclude, which is about 60 lines in exchange for a little prefix. Not to mention that if angular changes how ngInclude works, you'll be using a depracated or broken version of it.

  3. Write your own wrapping directive, which will call ngInclude. from now on you'll have myInclude:

    angular.module('myApp').directive('myInclude', [function () {
    var baseUrl = 'collosys';
    return {
        replace: true,
        scope: {
            myInclude: '@'
        },
        template: '<div ng-include="' + baseUrl + '{{myInclude}}"></div>'
    };
}]);

Yes you can, but I would write my own ng-include. If you try to upgrade angular, you will simply overwrite your changes.

Modify the head tag in your markup:

<head>
  <base href="collosys" />
</head>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top