AngularJS 分页与 $location.path 但没有 ngView 重新加载

标签 angularjs ngroute

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

使用 $http 加载想法:

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

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

但是,为了受益于历史导航和用户体验,我希望更新地址栏以使用 $location 显示每个想法的正确 URL:

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

我在这里调用 $apply 是因为这个事件来自 AngularJS 上下文之外,即 Flash。我希望当前的 Controller / View 保持不变并且 View 不重新加载。这是非常糟糕的,因为重新加载 View 会导致整个 Flash 对象被丢弃并且预加载器周期再次开始。

我尝试监听 $routeChangeStart 来执行 PreventDefault:

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

但无济于事。如果我能找到一种在更改 $location.path 时覆盖 View 重新加载的方法,那么整个事情就会很顺利。

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

最佳答案

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

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

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

并在您的应用中将 $location 更新为:

...
$location.search('page', pageNumber);
...

关于AngularJS 分页与 $location.path 但没有 ngView 重新加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12422611/

相关文章:

javascript - Angular js - 检查当前 url 是否与路由匹配(使用动态 url 参数)

javascript - Angular.js 应用程序 : eliminate #! 来 self 的单个帖子的 URL,同时保持 slug

javascript - 数组语法应该如何与 Angular $route Params 服务一起使用?

html - Angular 切换按钮或可能的其他解决方案

javascript - 为什么 Angular 返回引用错误 : ngResource is not defined?

javascript - 倒计时和重定向的正确方法

javascript - Angular 路由包含 #!在 url 而不是#

javascript - ng-click 后 Angular 不会重置表单?

jquery - 将 jsTree 与 Treemodel 集成

html - 如何在我的案例中设置多个类?