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

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

从这篇博客文章：默认情况下，所有位置更改都会经过路由过程，该过程会更新角度视图。但是，有一种简单的方法可以将其短路。Angular监视位置更改（是否通过输入位置栏，单击链接或通过来设置位置来完成 $location.path()）。当感知到此更改时，它将广播事件$locationChangeSuccess，并开始路由过程。我们要做的是捕获事件并将路由重置为以前的状态。function MyCtrl($route, $scope) {    var lastRoute = $route.current;    $scope.$on('$locationChangeSuccess', function(event) {        $route.current = lastRoute;    });}

Answer 3

我的解决方案是使用$ routeChangeStart，因为它为您提供了“下一条”和“最后一条”路线，您可以比较它们而无需像$ locationChangeSuccess那样的额外变量。好处是能够访问“下一条”路径和“最后一条”路径上的“ params”属性，例如next.params.yourproperty当您使用“ / property / value” URL样式时，当然$location.url还是使用或$location.path更改URL，$location.search()这取决于“？property = value” URL样式。在我的情况下，我不仅将它用于此目的，而且还防止控制器未更改而更改路由：$scope.$on('$routeChangeStart',function(e,next,last){  if(next.$$route.controller === last.$$route.controller){    e.preventDefault();    $route.current = last.$$route;    //do whatever you want in here!  }});我个人觉得AngularJS应该提供一种控制它的方法，现在他们认为，每当您更改浏览器的位置时，您都希望更改路线。