AngularJS修改模板后再运行模板未更新的解决办法

AngularJS,在创建指令时候HTML模板可以用两种形式赋值,

  • template: '<div><input type="text" ng-model="name"/></div>'
  • templateUrl: 'Template/template.html'

使用template的方式如果修改了模板,再次运行HTML会更新;如果使用templateUrl外部引入的方式,修改后HTML不会更新。这个时候清除浏览器的缓存就会得到最新的HTML模板代码。这样做第一是自己测试起来比较麻烦,第二是每个用户也不可能自己去清除缓存。

可以使用$templateCache清除缓存

1 // 禁止模板缓存 
2 app.run(function($rootScope, $templateCache) { 
3   $rootScope.$on('$routeChangeStart', function(event, next, current) { 
4     if (typeof(current) !== 'undefined'){ 
5       $templateCache.remove(current.templateUrl); 
6     } 
7   }); 
8 });

这样下次修改了模板就会自己更新了。

猜你喜欢

转载自www.cnblogs.com/erdaobuer/p/12711627.html