Question

如果我在某个自定义位置e.g. http://localhost/collosys托管角度应用，那么我必须更改所有ng-include以获得所有地址的“/ collosys /”，因为我使用的是绝对地址来引用任何HTML文件。

这就是我目前正在做的事情

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

然后在重写ng-include标记

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

我可以修改ng-include标签本身，以便它可以在所有地址前加上托管地址

修改

我在某处读到angularjs指令是可扩展的，关于如何扩展angularjs ngInclude指令的任何例子？任何例子??

Answer 1

我使用$ httpProvider.interceptors解决了这个问题。以下将'myAppDirectory'添加到所有请求。

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

常规ng-include，例如：

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

将加载 myAppDirectory /user/info.html

你可能想要做一些例外。就我而言：

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

Answer 2

如前所述，您有几个选项：

更改角度源代码（也称为猴子修补） - 不推荐，需要高度维护，并且使您的代码对其他人不可读。
使用装饰器，它允许您获取ngInclude指令并进行更改。装饰器通常用于扩展\更改第三方库，但缺点是你必须替换ngInclude的整个编译函数，这是大约60行代替一个小前缀。更不用说如果角度改变ngInclude如何工作，你将使用它的一个被删除或破坏的版本。

编写自己的包装指令，该指令将调用ngInclude。从现在起你将拥有myInclude：

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

Answer 3

是的，你可以，但我会写自己的ng-include。如果您尝试升级角度，则只需覆盖更改。

Answer 4

修改标记中的head标记：

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

修改ng-include指令

4 个答案: