15

我有一个 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 请求，还拦截加载模板（已在 html 文件中加载），用于定义如when('/', {controller:MainController, templateUrl:'home-template'}). 有没有办法让拦截器只拦截 HTTP 请求，或者如何识别我是从服务器加载内容还是只是从模板加载？

4

2 回答 2

23

我也遇到了这个问题。我们使用拦截器向所有 $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;
        }
    };
});
于 2014-07-31T13:56:59.927 回答
0

根据我收集的信息，您正在寻找一种方法来查看请求是否涉及模板文件。您可以做的是查看url请求，看看它是否包含您的部分目录的路径。

让我知道这是否是您正在寻找的：

var interceptor = ['$location', '$log', '$q', function($location, $log, $q) {
    function success(response) {
        // you can examine the url of the request here
        $log.info(response.config.url)
        return response;
    }

    function error(response) {
        if (response.status === 401) {
            $location.path('/signin');
            return $q.reject(response);
        } else {
            return $q.reject(response);
        }
    }
    return function(promise) {
        return promise.then(success, error);
    }
}];

$httpProvider.responseInterceptors.push(interceptor);
于 2013-06-25T17:52:48.860 回答