如何解决AngularJs在IE下取数据总是缓存的问题？

如果用AngularJs在IE下发出GET请求从后台服务取完Json数据再绑定到页面上显示的话，你可能会发现就算数据更新了，IE还是会显示原来的结果。实际上这时候IE的确是缓存了hashtag，没有再次去做Http GET请求最新的数据。

最直接的办法是在后台撸掉OutputCache，但这种做法并不推荐，需要改每一处被Angular调用的地方，代价太大。这种问题应该在前端解决最好。研究了一会儿总结了最有效的解决方法，并不需要改后台代码了。

在你的app config里撸一个$httpProvider进去，比如像我这样，和路由可以配在一起，当然分开配也没问题。

var config = ["$routeProvider", "$httpProvider", function ($routeProvider, $httpProvider) {

// Initialize get if not there

if (!$httpProvider.defaults.headers.get) {

$httpProvider.defaults.headers.get = {}

}

// Enables Request.IsAjaxRequest() in ASP.NET MVC

$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest'

// Disable IE ajax request caching

$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache'

$httpProvider.defaults.headers.get['Pragma'] = 'no-cache'

$routeProvider.when("/", { templateUrl: "Manage/dashboard/index.cshtml" })

.when("/dashboard", { templateUrl: "Manage/dashboard/index.cshtml" })

.when("/dashboard/serverinfo", { templateUrl: "Manage/dashboard/serverinfo.cshtml" })

.when("/dashboard/emaillogs", { templateUrl: "Manage/dashboard/emaillogs.cshtml" })

// other code....

.otherwise({ redirectTo: "/" })

}]

app.config(config)

最关键的就是最后的禁用IE对ajax的缓存

$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache'

$httpProvider.defaults.headers.get['Pragma'] = 'no-cache'

如果你想这样写，是会爆的：

$httpProvider.defaults.headers.get['If-Modified-Since'] = '0'

这样会导致include指令加载的partial view撸不出来，所以不要作死了

ngApp.config(function ($httpProvider) {

    // Initialize get if not there

    if (!$httpProvider.defaults.headers.get) {

        $httpProvider.defaults.headers.get = {}

    }

    // Enables Request.IsAjaxRequest() in ASP.NET MVC

    $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest'

    //禁用IE对ajax的缓存

    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache'

    $httpProvider.defaults.headers.get['Pragma'] = 'no-cache'

})

可以在AngularJS的配置中通过$httpProvider来设置其不缓存。

以通过在Provider中返回一个构造函数，并在构造函数中设计一个缓存字段，在末尾将引出这种做法。

首先自定义一个directive，用来点击按钮改变一个scope变量值。

angular

.module('app',[])

.directive('updater', function(){

reutrn {

scope: {

user: '='

},

template: '<button>Change User.data to whaaaat?</button>',

link: function(scope, element, attrs){

element.on('click', function(){

scope.user.data = 'whaaaat?'

scope.$apply()

})

}

}

---