本例demo是在写仿掘金首页时没能解决的问题。
效果图如下:
问题描述:
我在写仿掘金首页时,写了一个自定义返回顶部指令,内部实现了滚动监听,本想在里面写加载更多数据的代码,对全局变量datas重新赋值,但是在获取全局变量datas时不会获取。
搜索相关资料了解了一下自定义指令中$scope作用域的问题,scope的可取值有false,true,{},写了小 demo对这些基本有了了解,但对于我的问题还是无解。所以这个demo中的滚动监听并没有写到自定义指令里,而是写到了控制器中。
核心文件引入:
-jquery.min.js
-angular.min.js
-bootstrap.min.css
页面布局:
<ul ng-controller="myCtrl">
<li ng-repeat="data in datas">
<article>
<p>
<span>{{ data.author }}</span><span> · </span>
<span>{{ data.datetime }}</span><span> · </span>
<span>{{ data.category }} </span>
</p>
<h4>{{ data.title }}</h4>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-heart"></span>
4
</button>
<button type="button" class="btn btn-default btn-xs">
<span class=" glyphicon glyphicon-thumbs-down"></span>
1
</button>
</div>
<div class="btn-group share" role="group" aria-label="...">
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-share"></span>
</button>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star"></span>
</button>
</div>
</article>
</li>
</ul>
js文件
数据工厂:
.factory('dataList', ['$http', function($http){
var baseUrl = 'http://127.0.0.1:3000';
return {
getData:function(titleName,page){
return $http.get(baseUrl+'/home/'+titleName+"?page="+page);
}
}
}])
控制器:
.controller('myCtrl', ['$scope','dataList', function($scope,dataList){
// 分类名称(调用接口需要的字段)
dataList.getData("recommend",0).then(function(res){
$scope.datas = res.data.result;
oldData = res.data.result;
});
jQuery(window).scroll(function(){
var s = jQuery(window).scrollTop(),
h = jQuery(window).height(),
documentH = jQuery(document).height();
if(s+h>=documentH){
// loadMore
alert("要去加载更多数据");
dataList.getData("recommend",page+1).then(function(res){
// 上一页的数据
//console.log(oldData);
// 当前页数据:res.data.result
// 所有数据:进行了一个数组拼接
var newData = oldData.concat(res.data.result);
$scope.datas = newData;
});
}
})
}])