Angularjs of-include 强制重新加载

Question

我已经阅读了几篇关于这个主题的文章，但我仍然无法通过 ng-include 加载数据，以便在最初从远程数据服务器加载后重新加载。

（示例 How to reload / refresh model data from the server programmatically?）

I have a GSP page which renders a pull down menu of options, and when one is selected, ng-include calls a remote server and displays the data (in an 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 时存在问题。参考：modifying ng-include directive

Answer 1

首先，所有 angular html 加载后转到 $templateCahce，您可以手动管理它，例如：

  $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 加载模板后，您希望它在单击按钮或任何 link 单击时重新加载，然后：-

案例 1：- 您的模板已加载到 DOM。您只需要更新与元素关联的属性。

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

Angularjs of-include 强制重新加载

Angularjs ng-include force reload

javascript

gsp

angularjs