modifying ng-include directive

后端未结

关注

 4  1877

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 address

相关标签:

4条回答

礼貌的吻别

2021-01-23 05:56

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

0 讨论(0)

遥遥无期

2021-01-23 06:19

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

0 讨论(0)
发布评论:

提交评论
- 加载中...
野性不改

2021-01-23 06:19
Modify the head tag in your markup:
```
<head>
  <base href="collosys" />
</head>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
说谎

2021-01-23 06:21
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>'
    };
}]);
```
0 讨论(0)
发布评论:

提交评论
- 加载中...