页面滑动到底部时, ajax向后台请求分页数据,
2. 得到分页数据后$compilte编译指令, 赋值$scope.myData = datas;
3. 指令模版ng-repeat相应数据。
4. 第一次插入dom正常, 可下一次插入DOM中的指令模版 会把之前插入的数据改成这次的一样,
5 何解, 怎样避免这样???
底部请求:
$http.post(url, data, config).success(function(datas) {
var html = '<div my-list></div>';
var node = $compile(html)($scope.$new());
$(".list").append(node[0]);
$scope.myData= datas;
});
my-list指令:
dirModule.directive("facilityList", function($state, $http, $compile, lazy) {
return {
restrict: "AE",
template:'<li ng-repeat="my in myData" ng-controller="LiCtrl"><span>{{my.dd}}</span</li>',
};
});
controller控制器:
ctrlModule.controller("LiCtrl", function($scope, $http) {});
csdn里的提问 http://bbs.csdn.net/topics/391875896http://bbs.csdn.net/topics/391875896
应该用追加,而不是覆盖数据吧?
肯定是追加数据
@awayInner: 你的问题在于你在指令中没有使用scope: true,导致你的自定义指令共享了controller的作用域,所以当你第二次赋值的时候,相当于把更改了controller中myData,而angular的双向绑定机制就会起作用,将你第一次的元素给更新一下。
改法有很多,你可以在你的facilityList这个指令中,return {restrict: 'AE', scope: true,template:....}
@幻天芒: scope: true设置scope的都没法动态编译了
@awayInner: 额,看到了,是因为$scope.myData= datas; 这样你就改变了值。导致第一次的数据也被更新了。你可以在指令魔板中,使用单向绑定,如: template:'<li ng-repeat="my in ::myData" ng-controller="LiCtrl"><span>{{my.dd}}</span</li>',
BTW:我觉得你的实现思路可能有问题、
@幻天芒: 有没有更好的相应的DEMO?, 我通过建立一人数组push进去,实现了。 但数据越多就渲染越多
性能不太好
@awayInner: 单项绑定的性能就会好些,你的每个li都有一个controller是没必要的呢。。
@幻天芒: 有没有向下滚动分页的demo??
@awayInner: 没有哈,懒得写。dom元素多了,肯定会卡。滚动分页太深的时候,需要将不可见部分移除dom树。要不然,不管怎样都会卡顿的。