Question

我们的应用程序使用$http拦截器作为安全形式向$http请求添加令牌，拦截器添加的令牌每隔5分钟左右更新一次。我们现在想要使用ng-grid。

但是，$http拦截器使得ng-grid不会加载它用于标题行的模板，这会导致标题行无法呈现。

以下是行动中的问题：http://plnkr.co/edit/krvBF2e4bHauQmHoa05T?p=preview

如果您检查控制台，则会显示以下错误：

GET http://run.plnkr.co/l0BZkZ2qCLnzBRKa/ng1389719736618headerRowTemplate.html?securityToken=123456 404 (Not Found)

之所以发生这种情况，是因为ng-grid会在$templateCache中存储标题行的模板，然后使用ng-include来检索它。

ng-include使用$http.get请求（$templateCache作为缓存）来获取模板。

拦截器拦截了$http.get请求，在它有机会使用网址查询$templateCache模板之前，会将安全令牌添加到网址。

$templateCache期待ng1389719736618headerRowTemplate.html，而是获得ng1389719736618headerRowTemplate.html?securityToken=123456

结果是$templateCache无法找到模板，导致$http.get命中服务器并收到404错误。

另一个问题是，如果我们想要使用$templateCache存储模板，然后使用ng-include或$http.get检索模板，$templateCache将无法找到模板，因为网址会被修改。

如何让ng-grid显示带有$http拦截器的标题行，将安全令牌添加到网址的末尾？

这是代码 HTML：

<!DOCTYPE html>
<html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>  
        <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
        <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="gridOptions"></div>
    </body>
</html>

的javascript：

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.myData = [{name: "Moroni", age: 50},
                 {name: "Tiancum", age: 43},
                 {name: "Jacob", age: 27},
                 {name: "Nephi", age: 29},
                 {name: "Enos", age: 34}];
    $scope.gridOptions = { data: 'myData' };
});

app.config(function($provide, $httpProvider) {
    $provide.factory('tokenAuthInterceptor', function($q){
        return {
            // optional method
            'request': function(config) {
                // do something on success
                config.url = config.url + "?securityToken=123456";
                return config || $q.when(config);
            }
        };
    });
    $httpProvider.interceptors.push('tokenAuthInterceptor');
});

更新

最终确定的解决方案是使用角度装饰器并装饰$templateCache，更新了plunker以反映这一点。

$provide.decorator('$templateCache', function($delegate) {
    var get = $delegate.get;
    function formatKey(key)
        {
         // code for formatting keys
        }
        $delegate.get = function(key) {
            var entry = get(key);
            if (entry)
            {
                return entry;
            }
            else
            {
                return get(formatKey(key));
            }
        };
    return $delegate;
});

Answer 1

我们遇到了同样的问题并在我们的拦截器中实现了快速检查，以检查该项目是否已经在templateCache中。

if ($templateCache.get(config.url)){
    return config;
}

我从cachebuster项目中得到了这个想法。

使用$ http拦截器修改请求URL时，ng-grid不会加载标题行模板

1 个答案: