Question

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

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

我有一个GSP页面，它显示选项的下拉菜单，当选择一个时，ng-include调用远程服务器并显示数据（在ng-grid中）。因此，ng-include需要URL中远程服务器的完整路径。此代码可以正常使用第一次选项，但不会在后续选择中重新加载数据。我知道Angularjs正在缓存数据，但我需要强制它重新加载。是否有一个我可以在里面捕获的事件＆＃34; myTabController＆＃34;强迫它调用ng-include？是否可以禁用缓存？由于无法将Angularjs中的参数传递到ng-include的URL中，因此这些参数将通过另一部分中的AJAX调用发送，以便数据服务器在发出ng-include请求之前已经具有参数。 / p>

_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（）可以解决这个问题。我可以添加一个onload =＆＃34; xx（）＆＃34;到ng-include，以及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：我发现使用＆＃34; {{val}}＆＃34;传递值存在问题。将符号转换为ng-include的URL的指令。参考：modifying ng-include directive

Answer 1

首先，加载后的所有角度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 加载模板后，您希望在点击按钮或任何链接时重新加载模板，然后点击： -

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

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

Angularjs ng-include force reload

2 个答案: