【问题标题】:Reloading page in single page application在单页应用程序中重新加载页面
【发布时间】:2018-04-15 16:10:58
【问题描述】:

我正在构建一个单页应用程序。我的情况是,我在一个选项卡中有一个滑块,并在另一个选项卡中实现了一个谷歌地图 api。我已经使用引导轮播实现了滑块。现在,由于这是一个单页应用程序,当我从一个选项卡路由到另一个选项卡时,滑块不起作用,谷歌地图也没有出现。重新加载页面后一切正常。

我正在尝试为此寻找替代解决方案。单击后,我正在尝试再次重新加载选项卡。

<li class="nav-item">
   <a ng-click="reloadRoute()" class="nav-link" href="#/contact">Contact Us</a>
</li>

在控制器中这就是我正在尝试的

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

但它不起作用。 在关注帖子之后,文档看起来一旦加载整个应用程序就不可能在单页应用程序中重新加载单个页面。有没有其他解决方案?我正在使用 AngularJS 版本1.5.9

【问题讨论】:

  • 您是否考虑过 ng-map - 它可以解决您的问题。
  • @RandyCasburn 我没有使用它。我直接在控制器中添加了地图。能解决问题吗?
  • 是的,用地图+AngularJS解决了很多问题
  • @RandyCasburn 滑块呢?

标签: javascript angularjs ngroute


【解决方案1】:

学习如何将 Google 地图和滑块与 AngularJS 框架集成比重新加载整个页面更明智。

如果您必须重新加载页面,请使用$window.location.reload(true)

欲了解更多信息,请参阅MDN Web API Reference - Location.reload

【讨论】:

  • 有没有办法在单页应用程序中使用引导程序?
  • 当然有一些方法可以将 Bootstrap 与 AngularJS 框架集成。查看UI Bootstrap - Bootstrap components written in pure AngularJS by the AngularUI Team
  • 我点击了这个链接,但在轮播中有一行 image: '//unsplash.it/' + newWidth + '/300', 我不确定。它是否要求图像所在的指令?
  • 这里的答案是“在单页应用程序中重新加载页面”。如果您还有其他问题,请在新问题中提出。
猜你喜欢
  • 1970-01-01
  • 2018-05-10
  • 1970-01-01
  • 2018-05-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-03-18
  • 2014-09-08
相关资源
最近更新 更多