javascript 阻止 AngularJS 在路由之间缓存 html

Stop AngularJS from caching html between routes

提问by Sumit Maingi

I have two routes in a page wired up with Angular JS.

我在与 Angular JS 连接的页面中有两条路线。

One page has a form from which you can save some information, angular seems to be not requesting for the html when I switch back and forth between the routes.

一个页面有一个表单，您可以从中保存一些信息，当我在路由之间来回切换时，angular 似乎没有请求 html。

I have tried doing $httpProvider.defaults.cache = false;

我试过做 $httpProvider.defaults.cache = false;

Basically for one route I don't want Angular to be caching the html, for the other routes it is actually a good thing.

基本上对于一条路线，我不希望 Angular 缓存 html，对于其他路线，这实际上是一件好事。

Code is given here:

代码在这里给出：

angular.module('userAccount', ['ngRoute', 'ngAnimate'])
.config(['$routeProvider', '$locationProvider', '$httpProvider',
  function ($routeProvider, $locationProvider, $httpProvider) {
      //$httpProvider.defaults.cache = false;
      $locationProvider.hashPrefix('');
      $routeProvider
        .when('/UserProfile/:action', {
            reloadOnSearch: false,
            cache: false,
            templateUrl: function (params) {
                return '/UserProfile/' + params.action;
            },
            controller: 'UserProfCtrl'
        })
        .when('/UserDashboard/:action', {
            templateUrl: function (params) {
                return '/UserDashboard/' + params.action;
            },
            controller: 'UserDashCtrl'
        })
        .otherwise('/UserDashboard/Index');
  }])
.controller('MainCtrl', ['$scope', '$route', '$routeParams', '$location',
  function ($scope, $route, $routeParams, $location) {
      $scope.$on('$routeChangeStart', function (next, current) {

      });

      this.$route = $route;
      this.$location = $location;
      this.$routeParams = $routeParams;
  }])
.controller('UserProfCtrl', ['$routeParams', function ($routeParams) {
    this.name = "UserProfCtrl";
    this.params = $routeParams;
}])
.controller('UserDashCtrl', ['$routeParams', function ($routeParams) {
    this.name = "UserDashCtrl";
      this.params = $routeParams;
    }]);

Note that i have removed some unrelated ui manipulation code here.

请注意，我在这里删除了一些不相关的 ui 操作代码。

回答by Parmod

I have same problem in my hybrid mobile app and resolved by adding cache: false in my route.js

我在我的混合移动应用程序中遇到了同样的问题，并通过在我的 route.js 中添加 cache: false 来解决

$stateProvider.state('stateName', {
   cache: false,
   url : '/url',
   templateUrl : 'template.html'
})

Hope it will resolve your problem as well.

希望它也能解决您的问题。

you can try to add query string with url

您可以尝试使用 url 添加查询字符串

return '/views/' + params.action+'?'+$.now();

回答by Alaa mohammed

I know its late but it may help someone

我知道为时已晚，但它可能会帮助某人

I just used this before my routes and it worked.

我只是在我的路线之前使用过它并且它起作用了。

myApp.run(function($rootScope, $templateCache) {
   $rootScope.$on('$viewContentLoaded', function() {
      $templateCache.removeAll();
   });
});

回答by jcromeros1987

After searching in many sites, i haven't found a correct solution of this, but watching the question and the answer in this post, I have made the next solution than solved my problem (no at all).

在许多网站上搜索后，我还没有找到正确的解决方案，但是看着这篇文章中的问题和答案，我做出了下一个解决方案，而不是解决了我的问题（根本没有）。

If I clicked two consecutive times into the products' link, the second clic don't reload/evaluate the content, but if I clicked on other link and then click on the link produtcs, angular reload the content of this.

如果我连续两次点击产品链接，第二次点击不会重新加载/评估内容，但如果我点击其他链接然后点击链接产品，角度重新加载内容。

            var app = angular.module("myApp", ["ngRoute"]);

            app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

                $routeProvider
                .when("/", {
                    templateUrl : "main.php"
                })
                .when("/productos", {
                    disableCache: true,
                    templateUrl : function (params) {
                        return "productos.php?" + $.now();
                    }
                })
                .when("/contacto", {
                    templateUrl : "contacto.php"
                })

                $locationProvider.html5Mode(true);

            }]);