Angularjs ng-包括强制重新加载

Question

我已经阅读了有关此主题的几篇文章，但在最初从远程数据服务器加载后，仍然无法通过 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 中的指令时存在问题。参考：

---

修改ng-include指令

Answer 1

$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'

然后你根本不应该关心缓存。

Answer 2

ng-include

加载模板后，您希望它在单击按钮或单击任何链接时重新加载：- 情况 1：- 您的模板已加载到 DOM 中。您只需要更新与元素关联的属性。

案例 2：- 使用 $scope.$broadcast 调用映射到模板的函数。 使用 $broadcast() 你将能够更新已经与 DOM 关联的模型/属性，并且你的模板将被重新加载。

Answer 3