我正在显示ng include中的元素列表。元素列表来自使用$resource query
服务的服务器
该列表使用ui引导程序分页指令进行分页。服务器在Json头中发送分页信息(属性名为X-MyApp-…),并被CCD_ 2回调函数截获。
这是html:
<table ng-include src="'partials/tplList.html'" ng-init="listInit = {'type': collec.type, 'offset': 1}" ng-controller="ListCtrl" >
</table>
tplList.html:
<tbody ng-init="loadList(listInit)"><tr ng-repeat="elm in list">
<td>{{elm.prop1}}</td><td>{{elm.prop2}}</td><td>{{elm.prop3}}</td>
</tr></tbody>
<tfoot><tr><td colspan="4">
<span ng-show="pageCount>1">
<pagination num-pages="pageCount" current-page="currentPage" max-size="10" on-select-page="loadList(collect(listInit, {offset: page}))">
</pagination>
</span>
</td></tr></tfoot>
控制器:
controller('ListCtrl', ['$scope', 'List', function($scope, List) {
// collect: concatenate the objects before to send it to loadList()
$scope.collect = function (a,b){
var c = {};
for (var att in a) { c[att] = a[att]; }
for (var att in b) { c[att] = b[att]; }
return c;
}
$scope.loadList = function (param) {
$scope.list = List.query(p, function(list, response) {
$scope.currentPage = response("X-MyApp-currentPage");
$scope.pageCount = response("X-MyApp-pagesCount");
console.log($scope.currentPage); // returns 1 when the page loads.
});
}
}])
和服务:
factory('List', function($resource){
return $resource('url/to/the/json/:type', {type:'@type'});
})
除了一件事之外,一切都很好:当页面加载时,分页组件内的第一个页面按钮("1")并没有像应该的那样被禁用("上一个"one_answers"第一个"按钮也没有)。它不会被禁用,直到我点击另一个页码(选择时正确禁用),然后点击第一页按钮。
知道吗?
之所以会发生这种情况,是因为ng-include创建了一个新的作用域,而模型在$parent作用域中没有修改。
请尝试以下代码,或者创建一个与父控制器通信的控制器。
<pagination num-pages="pageCount" current-page="$parent.currentPage" max-size="10" on-select-page="loadList(collect(listInit, {offset: page}))">
</pagination>
我找到了一种让它工作的方法:
从控制器上删除了这行:
$scope.currentPage = response("X-MyApp-currentPage");
并添加了这个:
$scope.currentPage = 1;
它给出:
controller('ListCtrl', ['$scope', 'List', function($scope, List) {
// collect: concatenate the objects before to send it to loadList()
$scope.collect = function (a,b){
var c = {};
for (var att in a) { c[att] = a[att]; }
for (var att in b) { c[att] = b[att]; }
return c;
}
$scope.currentPage = 1;
$scope.loadList = function (param) {
$scope.list = List.query(p, function(list, response) {
$scope.pageCount = response("X-MyApp-pagesCount");
});
}
}])
显然,分页组件不需要来自服务器的X-MyApp-currentPage
信息(我不确定为什么)。