我已经阅读了有关此主题的几篇文章,但在最初从远程数据服务器加载后,仍然无法通过 ng-include 加载数据以重新加载。
我有一个 GSP 页面,它呈现一个选项下拉菜单,当选择一个选项时,ng-include 调用远程服务器并显示数据(在 ng-grid 中)。因此 ng-include 需要 URL 中远程服务器的完整路径。此代码在“第一次”使用选项时可以正常工作,但不会在后续选择时重新加载数据。我知道 Angularjs 正在缓存数据,但我需要强制它重新加载。我可以在“myTabController”内部捕获一个事件来强制它调用 ng-include 吗?是否可以禁用缓存?由于无法将参数从 Angularjs 传递到 ng-include 的 URL,因此这些参数将通过另一部分中的 AJAX 调用发送,以便数据服务器在发出 ng-include 请求之前已经拥有参数。 _myTabs.gsp
<div ng-controller= "myTabController" ng-init="init(${selIds})">
<select name="tabSelect" ng-model= "tab" ng-options="t.name for t in tabs"></select>
<form name="tabForm">
<div ng-switch="tab.value">
<div ng-switch-when="optionA"<div ng-include="'https://datasrv:8453/DataApp/dataCtrl/aData'" ><div></div>
<div ng-switch-when="optionB"<div ng-include="'https://datasrv:8453/DataApp/dataCtrl/bData'" ><div></div>
<div ng-switch-when="optionC"<div ng-include="'https://datasrv:8453/DataApp/dataCtrl/cData'" ><div></div>
</div>
</form>
</div>
myTabs.js
angular.module('myApp', ['ui.grid', 'ui.grid.resizeColumns', 'ngAnimate', 'ngRoute']);
app.controller("myTabController", function($scope, $interval, $filter, $window, $http, $rootScope, uiGridConstants){
$scope.tabs = {
{ name: '--- Please Select an Option ---', value: ' '},
{ name: 'A Label', value: 'optionA'},
{ name: 'B Label', value: 'optionB'},
{ name: 'C Label', value: 'optionC'}
];
}]);
编辑: 从我的问题的答复来看,调用 $templateCache.removeAll() 似乎可以解决这个问题。我可以向 ng-include 添加一个 onload="xx()" ,并向 myTabController 添加一个函数:
$scope.xx = function(){
$templateCache.removeAll();
}
但是它当然告诉我 $templateCache 没有定义。所以我在运行块内尝试了这个:
$scope.xx = function(){
app.run( function( $templateCache ){
$templateCache.removeAll();
});
}
这不会产生错误,但也没有执行任何操作。函数 xx() 正在被调用,但它没有调用 $templateCache.removeAll()。我错过了什么?
编辑2。
我尝试使用指令来生成 ng-include 标签:
<div ng-switch-when="optionA"<div mydir ng-attr-path="https://datasrv:8453/DataApp/dataCtrl/aData" ><div></div>
在指令中,我尝试向 URL 添加随机数以使其唯一:
.directive('mydir', ['$compile', function($compile){
restrict: 'A',
template: function( elem, attr ){
var r = Math.random()
var rpath = attr.path + '/?r=' + r
return "<div ng-include=\"'" + rpath + "'\" onload=\""xx('" + rpath + "')\"></div>";
}
};
不幸的是,这没有任何区别。它确实正确生成了 ng-include,包括末尾的随机字符串。它显示了一次数据,但在后续调用中从未重新生成 URL。然而,每次加载时都会调用 xx() 函数。
关键是要以某种方式强制每次选择菜单项时调用该指令,以便再次调用随机数来更改 URL。或者使用xx()函数清除缓存。但如何呢?
编辑3: 我发现使用“{{val}}”符号将值传递到 ng-include 的 URL 中的指令时存在问题。参考:
$templateCache.put('qwerty', 'pit is best');
然后
<div ng-include="'qwerty'" ></div>
您还可以使用
$templateCache.remove
从中删除任何内容。
如果删除模板,那么 Angular 将尝试从服务器加载新的 html。 现在浏览器缓存可能会发挥作用 - 要禁用它,您可能需要在 http 拦截器中添加类似 ?timestamp= 的内容。
注意:你关于 ng-include 的陈述对我来说似乎很奇怪 - 当然你可以将参数传递给 ng-include 。这就是你应该做的:
<div ng-include="myURL"> </div>
所以你先做
myURL = 'https://datasrv:8453/DataApp/dataCtrl/cData/selection=1'
然后
myURL = 'https://datasrv:8453/DataApp/dataCtrl/cData/selection=2'
然后你根本不应该关心缓存。加载模板后,您希望它在单击按钮或单击任何链接时重新加载:- 情况 1:- 您的模板已加载到 DOM 中。您只需要更新与元素关联的属性。
案例 2:- 使用 $scope.$broadcast 调用映射到模板的函数。 使用 $broadcast() 你将能够更新已经与 DOM 关联的模型/属性,并且你的模板将被重新加载。