javascript - 如何在 AngularJS 中重新加载 ng-include？

Question

我正在通过创建一个站点来学习 AngularJS，该站点与我在 node.js 中编写的系统进行交互。该站点的一部分要求我从两个不同的位置获取信息(例如，从我自己的存储名称数据库中获取城镇名称，以及从另一个站点获取天气信息)。我正在使用这个片段来获取数据:

<tr ng-repeat="town in towns | filter:query | orderBy:orderBy">
    <td ng-bind="town.ShortName"></td>
    <td ng-include src="'http://example.com/weather/' + town.ID'"></td>
</tr>

效果很好，因为我得到了城镇名称(例如墨尔本)和天气数据。接下来，我添加了 socket.io 来监听事件(例如 weatherupdate):

  <script type="text/javascript">
    var socket = io.connect();
    socket.on("weatherupdate", function() {
      angular.element("#listController").scope().reloadView()
    })
  </script>

这是我 Controller 中的重新加载函数:

  $scope.reloadView = function() {
        $route.reload();
  }

这在大多数情况下都有效。如果我对城镇 ShortName 进行更改，下次发出“weatherupdate”时， View 会闪烁(就像它正在重新加载)并且新的 town.ShortName 会显示在 td 中。

然而，天气并没有改变。如果我手动重新加载页面(使用 F5 或 javascript 函数重新加载整个页面)，新的天气就很好，但是当函数自动重新加载路由时，除了 ng-include src 之外的所有内容 已更新。

我也试过添加

$templateCache.remove($route.current.templateUrl);

就在 $route.reload() 之上，但无济于事。我想我可以 $http.get 天气数据并对其进行操作，但我认为 ng-include 会很好也很容易

Answer 1

使用 $templateCache.remove($route.current.templateUrl); 将删除您页面的缓存，但不会删除从该路由发出的所有外部请求的缓存，因此不是你想要的。

您需要在重新加载之前为每个被 ng-included 的 url 删除缓存，或者您需要一种绕过缓存的方法。一个简单的方法是在 url 中添加更新时间的查询参数，如下所示:

在你的列表 Controller 中:

$scope.updateTime = Date.now();

在您的 HTML 中:

<tr ng-repeat="town in towns | filter:query | orderBy:orderBy">
    <td ng-bind="town.ShortName"></td>
    <td ng-include src="'http://example.com/weather/' + town.ID + '?updated=' + updateTime"></td>
</tr>

虽然服务器将忽略更新的查询参数，但由于 url 不同，将不会应用任何类型的缓存。