javascript - 为嵌入式 ng-templates 执行的 Angular HTTP 拦截器

Question

我有一个 Angular 拦截器在工作:

factory('myHttpInterceptor', function ($q, $location, $rootScope) {
// do something
return function (promise) {
    return promise.then(function (response) {
        // do something
        return response;
    }, function (response) {
        // do something
        return $q.reject(response);
    });
};
})

和一个大的 html 文件，其中包含类似 <script type="text/ng-template" id="home-template"> 的模板.不幸的是，我的 HTTP 拦截器不仅拦截了加载 HTTP 请求，还拦截了为定义为 when('/', {controller:MainController, templateUrl:'home-template'}) 的 Controller 加载模板(已加载到 html 文件中)。 .有没有办法让拦截器只拦截 HTTP 请求，或者如何识别我是从服务器加载内容还是只是从模板加载内容？

Answer 1

我也遇到了这个问题。我们使用拦截器向所有 $http 调用添加查询字符串。它最终破坏了我们的模板，因为在 $templateCache 中查找时，未找到带有查询字符串的模板名称(模板最初只是使用它的 id 进行缓存)。

Angular $httpProvider 拦截器将拦截 $http 模块调用。这些 $http 调用不一定是真正的 HTTP GET/POST 请求，它们也可以是在 $templateCache 中获取模板的调用。似乎在引用嵌入式模板时，首先使用 $http 模块(首先运行拦截器)，然后 $http 模块将查看 $templateCache 以查看模板是否已缓存。如果 $http 发现该项目存在于 $templateCache 中，它将返回它，如果不存在，它将尝试发出实际的 HTTP 请求以获取模板。

我们的解决方案是在我们的拦截器中包含 $templateCache 模块，并首先手动检查 $templateCache 中是否存在 http 请求。如果请求不在 $templateCache 中，请添加我们的查询字符串，如果它在 $templateCache 中，则只需返回它。

$httpProvider.interceptors.push(function($templateCache) {
    return {
        'request' : function(request) {
            // If the request is a get and the request url is not in $templateCache
            if(request.method === 'GET' && $templateCache.get(request.url) === undefined) {
                // Item is not in $templateCache so add our query string
                request.url = request.url + '?time=' + new Date().getTime();
            }
            return request;
        }
    };
});