AngularJS使用$ location.path进行分页但没有重新加载ngView

Question

我的单页应用程序加载主页,我想显示一系列想法.每个想法都显示在一个动画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,所以我很高兴有关如何构建应用程序以实现我的目标的任何指示!

Answer 1

而不是更新路径,只需使用页码更新查询参数.

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

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

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

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

Answer 2

来自这篇博文:

默认情况下,所有位置更改都会通过路由过程,这会更新角度视图.

然而,有一种简单的方法可以将其短路.用于位置更改的角度监视(无论是通过在位置栏中键入,单击链接还是通过设置位置来完成 $location.path()).当它感知到这种变化时,它会广播一个事件$locationChangeSuccess,并开始路由过程.我们所做的是捕获事件并将路线重置为之前的路线.

function MyCtrl($route, $scope) {
    var lastRoute = $route.current;
    $scope.$on('$locationChangeSuccess', function(event) {
        $route.current = lastRoute;
    });
}