一尘不染

使用$ location.path但不重新加载ngView的AngularJS分页

angularjs

我的单页应用程序加载一个主页,我想显示一系列想法。每个创意都显示在动画Flash容器中,并显示动画以在创意之间循环。

使用$ http加载提示:

$scope.flash = new FlashInterface scope:$scope,location:$location

$http.get("/competition.json")
  .success (data) ->
    $scope.flash._init data

但是,为了从历史记录导航和UX中受益,我希望更新地址栏以使用$ location为每个提示显示正确的url:

$location.path "/i/#{idea.code}"
$scope.$apply()

我在这里调用$
apply,因为此事件来自AngularJS上下文(即Flash)。我希望保留当前的控制器/视图,并且不重新加载视图。这非常糟糕,因为重新加载视图会导致整个Flash对象被丢弃,并且预加载器周期会再次开始。

我试过听$ routeChangeStart做一个preventDefault:

$scope.$on "$routeChangeStart", (ev,next,current) ->
  ev.preventDefault()
$scope.$on "$routeChangeSuccess", (ev,current) ->
  ev.preventDefault()

但无济于事。如果我能在更改$ location.path时想出一种重写视图重载的方法,那么整个事情就很麻烦了。

我仍然对AngularJS感到很满意,因此我很高兴能找到有关如何构建应用程序以实现我的目标的任何指示!


阅读 216

收藏
2020-07-04

共1个答案

一尘不染

无需更新路径,只需使用页码更新查询参数。

设置路由以忽略查询参数更改:

....
$routeProvider.when('/foo', {..., reloadOnSearch: false})
....

并在您的应用程序中更新$location

...
$location.search('page', pageNumber);
...
2020-07-04