如何用 AngularJS 实现 historyAPI？答案

【问题标题】：How to implement historyAPI with AngularJS?如何用 AngularJS 实现 historyAPI？
【发布时间】：2013-09-25 11:46:19
【问题描述】：

我正在尝试在 qz.com 上构建一个原型。

方法如下：

进行函数调用以在滚动到页面底部时加载下一段内容。
相同的函数会使用 $location.path(url) 或 window.history.pushState() 更改 url
向上滚动时，两者中的任何一个都会根据显示的部分更改 url。

我被困在第 2 点。每当我调用 $location 或 pushState 时，页面都会重新加载并进入循环。

代码如下：

控制器

controller('BlogCtrl', function ($scope, $location, $http) {
$scope.blogs = [];
var counter = -1;
$scope.loadNext = function() {      
  $http.get('/api/blogs').success(function(data) {
    //console.log(counter);
    $scope.blogs.push(data[counter]);
    //$location.path('blog/'+data[counter].url);
    //window.history.pushState('blog/'+data[counter].url);
  });
  counter+=1;
}
$scope.loadNext();

})

指令

directive('scrollLoad', function () {
return function (scope, elm, attr) {
    // Scroll should have been there instead of hover event.
    // For some reason, scroll wasn't being detected, hence used hover function.
    // It is essentially a hack. Need to revisit this piece.
    elm.on('hover', function() {
      window.onscroll = function(ev) {
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
            scope.$apply(attr.scrollLoad);
        }
      }
    });
}

});

html

div
  div(scroll-load="loadNext()", ng-repeat="blog in blogs")
    h1 {{blog.title}}
    p {{blog.content}}

回购链接：https://github.com/fotuzlab/two1/

如果您有其他方法的建议，请回复here

【问题讨论】：

标签： javascript html angularjs express scroll

【解决方案1】：

回答自己。

不确定这里的逻辑，但是将 HTML 从 partial 移动到 index.html 是可行的。

这件作品现在是 Sarus 项目的一部分，采用了一种改进的方法。 https://github.com/srijanlabs/sarus

【讨论】：