javascript - 扩展 angular.js 以自动将后缀附加到所有 templateURL 值

Question

我有很多 angular.js 组件，它们以典型的方式加载 html 模板:

templateUrl: 'www.me.com/view.html'

我想以某种方式调整/扩展 angular.js，以便在访问 templateURL 之前始终将某些字符串附加到 templateURL 中。例如，在上面的示例中，将获取的实际 uri 将是:

www.me.com/view.html?a=b&c=d

不是

www.me.com/view.html

我知道我可以简单地编辑组件文件以在末尾附加此 ?a=b&c=d，但我无法这样做。不过，我可以向网站添加一个 javascipt 文件，以某种方式完成此任务。

有什么想法吗？

Answer 1

根据您的要求，您也许可以使用 HTTP 拦截器。如果您的网址在添加查询参数之前唯一标识模板，那么这将起作用。

HTTP 拦截器允许您使用附加数据来装饰 HTTP 请求和响应。

下面是一个示例:

function templateInterceptor() {
    return {
        request: function(config) {
            if (config.url.indexOf('www.me.com/view.html') === 0) {
                config.params = config.params || {};
                config.params.a = 'b';
                config.params.c = 'd';
            }

            return config;
        }
    }
}

angular.module('app', [])
    .factory('templateInterceptor', templateInterceptor)
    .config(function($httpProvider) {
        $httpProvider.interceptors.push('templateInterceptor');
    });

行 if (config.url.indexOf('www.me.com/view.html') === 0) 取决于某种可靠的方法来确定 URL 是否引用模板。 也许过滤 .html 文件的请求会更准确。

仅当您的 URL 在附加查询参数之前唯一标识每个模板时，此方法才有效，这是因为 AngularJS 模板缓存。 AngularJS 使用 templateUrl 来缓存模板请求。

如果此解决方案不起作用，您可能会被迫 fork AngularJS 并更改模板缓存代码。