modifying ng-include directive

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

score 4 · Accepted Answer · answered Sep 25 '14 at 20:20

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;
      },
    };
  });

Using this approach is the only way I have found to blacklist certain ng-include'd items from the template cache: add a random url param like '?123' to the end of config.url for files that should not be cached by $templateCache. — bradw2k, Apr 27 '15 at 21:15

score 2 · Answer 2 · edited Sep 17 '15 at 15:39

You have several options as previously mentioned:

Change angular source code (also known as monkey patching) - not recommended, requires high maintenance and makes your code unreadable for other people.
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.

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>'
    };
}]);

I tried this and it fails on the template of the new directive..... ```.directive('viewInclude', [function() { var baseUrl = 'fams360frontend/views'; return { replace: true, scope: { viewInclude: '@' }, template: '
' }; }]);``` — Bill Garrison, Sep 17 '15 at 15:09

score 0 · Answer 3 · answered May 01 '14 at 17:53

0

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

answered May 01 '14 at 17:53

rigaman

151
2
7

score 0 · Answer 4 · answered May 01 '14 at 18:06

0

Modify the head tag in your markup:

<head>
  <base href="collosys" />
</head>

answered May 01 '14 at 18:06

Brocco

62,737
12
70
76

i am already writing base tag... have already written that in question, wont that work?? – harishr May 01 '14 at 18:33
I'm not sure if it works when the value is set in the client (after the DOM has rendered) I am setting that value on the server. – Brocco May 01 '14 at 18:36

modifying ng-include directive

4 Answers4

Linked