如何在AngularJS中重新加载ng include

How to reload ng-include in AngularJS?

本文关键字：加载 ng include 新加载 AngularJS      更新时间：2023-09-26

我通过创建一个与我在节点中编写的系统交互的站点来学习AngularJS。这个网站的一部分要求我从两个不同的地方获取信息（例如，我自己存储的名称数据库中的城镇名称，加上另一个网站的天气）。我使用这个片段来获取数据：

<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来监听事件（例如天气更新）：

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

这是我的控制器中的重新加载功能：

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

这在很大程度上是有效的。如果我更改了城镇的ShortName，下次发出"weatherupdate"时，视图会闪烁（就像重新加载一样），然后是新城镇。ShortName显示在td中。

然而，天气不会改变。如果我手动重新加载页面（使用F5或javascript函数来重新加载整个页面），新天气会很好地获取，但当函数自动重新加载路线时，除了ng-include src之外的所有内容都会更新。

我还尝试添加

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

略高于CCD_ 3，但无效。我想我可以$http.get天气数据并对其进行操作，但我认为ng-include将是一个很好且简单的

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

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

在您的列表控制器中：

$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不同，任何类型的缓存都不会应用。

相关文章：