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

问题描述

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

I have an Angular interceptor working:

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

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

and one big html file which contains templates like <script type="text/ng-template" id="home-template">. Unfortunately my HTTP interceptor intercepts not only loading HTTP requests but also loading templates (which are already loaded in html file) for controllers which are defined like when('/', {controller:MainController, templateUrl:'home-template'}). Is there a way how to make interceptor intercepting only HTTP requests or how to recognize whether I am loading something from server or just a template?

推荐答案

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

I ran in to this issue as well. We were adding query strings to all our $http calls with an interceptor. It ended up breaking our templates, because when looking in $templateCache the template name with query string wasn't being found (the template was originally cached with just using it's id).

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

Angular $httpProvider interceptors will intercept $http module calls. These $http calls are not necessarily real HTTP GET / POST requests they can also be calls to get templates in $templateCache. It seems like when an embedded template is being referenced, first the $http module is used (which run the interceptor first) and then the $http module will look in $templateCache to see if the template is already cached. If $http finds out the item exists in $templateCache it will return it, if not it will attempt to make an actual HTTP request to get the template.

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

Our solution was to include the $templateCache module in our interceptor and manually check first if the http request exists in $templateCache. If the request is not in $templateCache add our query string, if it is in $templateCache then simply return it.

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

这篇关于为嵌入式 ng-templates 执行的 Angular HTTP 拦截器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！