我正在尝试在 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/
如果您对其他方法有建议，请在此处回答