我有一个AngularJS应用程序,它调用API并返回一组数据,用户可以按标签过滤这些数据,以便在结果中获得更大的粒度.每次单击标记以过滤数据时,应用程序都会进行新的$http.get()调用,并使用相应的查询参数修改URL,以便用户可以保存永久链接并返回到任何特定的数据集.

我正在尝试使用window.history.pushState()为应用程序提供正确的历史记录处理,并将每个历史记录对象的相关查询参数作为状态数据传递.我正在使用window.onpopstate来检测单击后退/前进按钮的时间,并使用它来使用历史记录中的相关状态数据进行新的$http.get()调用.

由于某种原因,$http.get()函数仅在每个第二个popstate上触发,然后它进行两次调用.这几乎就像有一些缓存一样,但我找不到罪魁祸首.此行为在两个方向,向后和向前都持续存在,并且始终是每隔一个事件.我已经验证window.history.length仅为添加/删除的每个标记递增1,成功发送状态数据,正确组装新的搜索查询,并且请求路径正确.它只是没有射击.这是怎么回事？？

为了说明,行为流程如下所示：

>加载页面/默认

>添加第一个标记：URL是/ default& tags = a,$http.get()返回新数据
>添加第二个标记：URL是/ default& tags = a,b,$http.get()返回新数据
>添加第三个标记：URL是/ default& tags = a,b,c,$http.get()返回新数据
>添加第四个标记：URL是/ default& tags = a,b,c,d,$http.get()返回新数据

>第一个后退按钮事件

> window.onpopstate fires,URL现在是/ default& tags = a,b,c
>没有网络变化

>第二次按钮事件

> window.onpopstate fires,URL现在是/ default& tags = a,b
> $http.get()触发,使用/ default& tags = a,b,c发送网络数据请求
> $http.get()再次触发,使用/ default& tags = a,b发送网络数据请求
> / default& tags = a,b loading的数据集

>第三回按钮事件

> window.onpopstate fires,URL现在是/ default& tags = a
>没有网络变化

>第四回按钮事件

> window.onpopstate fires,URL现在是/ default
> $http.get()触发,使用/ default& tags = a发送数据的网络请求
> $http.get()再次触发,用/ default发送网络数据请求
> / default加载的数据集

相关代码段：

$scope.apiRequest = function(options, callback) {

    // Omitted: a bunch of functions to build query
    // based on user-selected tags.
    // I've verified that this is working correctly.

    $http.get(path)
      .then(function(response) {
        console.log('http request submitted');
        if (callback) {
          callback(response.data.response, response.data.count, response.data.facets);
          console.log('data returned');
        }
      }, function(response) {
          console.log('there has been an error');
     });
}

成功和错误事件都不会触发.我已经尝试使用$http.get().then().catch()查看是否有其他内容正在进行,但由于某种原因,我在控制台中一直收到错误说明… catch( )不是一个有效的功能,它本身就令人困惑.有任何想法吗？

谢谢！

解决方法:

这听起来表明函数没有在$digest循环中循环.在这种情况下,您可以尝试添加$scope.$apply();作为window.onpopstate处理函数的最后一行,用于启动$digest循环来执行函数调用.

这篇文章,Notes On AngularJS Scope Life-Cycle帮助我更好地理解$digest循环以及如何强制$digest循环以$scope运行.$apply();请记住,你想要使用$scope.$apply()谨慎但在某些情况下你*开始循环,特别是使用异步回调.