4

angularjs を使用してシンプルなユーザー管理システムを開発しています。これは、単純な追加、更新、および削除の種類のアプリケーションです。JSON 応答を取得するために、バックエンドで spring-mvc を使用しています。Firefox、Chrome、Safariではすべて正常に動作しますが、IE..!!!!

すべてのユーザーを一覧表示する 1 つのページがあります。初めて IE9/10 で正常に動作しますが、任意のユーザーで行われた更新は (IE を使用して) ビューに反映されません。

何が起こっているのか理解できません。IE9/10もjsonデータをキャッシュし、ユーザーリストページが呼び出されるたびに、そのキャッシュされたデータをページにバインドすると思います。

ロードされたデータを IE9/10 に忘れさせることはできますか?

Web サービスにアクセスするための Angular モジュール:

angular.module("user.service", ["ngResource"]).
  factory('User', function($resource, $rootScope) {
    var User = $resource(
      $rootScope.apipath + 'users/:userId', {userId: '@id'},
      {update: {method: 'PUT'}}
    );

    User.prototype.isNew = function() {
      return (typeof(this.id) === 'undefined');
    };

    return User;
});

ユーザーリスト コントローラー:

function UserListController($scope, User) {
    $scope.users = User.query();
}

UserList タンプレート :

<h2><msg key="users"></msg><a class="btn btn-primary pull-right" href="#/users/new"><i class="icon-plus-sign icon-white"></i><msg key="addnew"></msg></a></h2>

<table class="table table-striped">
    <tr>
        <th><msg key="username"></msg></th>
        <th><msg key="name"></msg></th>
        <th></th>
    </tr>
    <tr ng-repeat="user in users">

        <td>{{user.userId}}</td>
        <td>{{user.contact.firstName}} {{user.contact.lastName}}</td>
        <td>
            <div class="pull-right">
                <a class="btn btn-info" href="#/users/{{user.id}}">
                    <i class="icon-pencil icon-white"></i><msg key="edit"></msg>
                </a> 
            </div>
        </td>
    </tr>
</table>
4

2 に答える 2

3

大規模なAngularJsアプリケーションを開発しており、IEでもキャッシュの問題に遭遇しました。最終的な修正は、API 応答メッセージにキャッシュ コントロール ヘッダーを追加することでした。

Cache-Control: no-store

別のオプションは、一意のタイムスタンプを追加する http インターセプターを作成して、各要求が異なり、キャッシュされないようにすることです。

http インターセプターの作成方法については、Jef Claes によるこの記事を参照してください。

投稿のコード例

var AppInfrastructure = angular.module('App.Infrastructure', []);

AppInfrastructure
    .config(function ($httpProvider) {
        $httpProvider.requestInterceptors.push('httpRequestInterceptorCacheBuster');
    })    
    .factory('httpRequestInterceptorCacheBuster', function () {
        return function (promise) {
            return promise.then(function (request) {
                if (request.method === 'GET') {
                    var sep = request.url.indexOf('?') === -1 ? '?' : '&';
                    request.url = request.url + sep + 'cacheSlayer=' + new Date().getTime();
                }

                return request;
            });
        };
    });
于 2013-06-21T11:39:54.207 に答える