0

我正在显示 ng-include 中的元素列表。元素列表来自使用$resource query服务的服务器。
该列表使用ui-bootstrap 分页指令进行分页。服务器在 Json 标头中发送分页信息（属性名为 X-MyApp-...），并被query回调函数拦截。

这是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”）没有像应有的那样被禁用（并且“上一个”和“第一个”按钮也没有）。直到我单击另一个页码（选择时正确禁用）然后单击第一页按钮后，它才会被禁用。

任何想法 ？

4

2 回答 2

2

发生这种情况是因为 ng-include 创建了一个新范围，并且模型未在您的 $parent 范围内修改。

尝试以下代码或创建一个与父级通信的控制器。

<pagination num-pages="pageCount" current-page="$parent.currentPage" max-size="10" on-select-page="loadList(collect(listInit, {offset: page}))">
    </pagination>
于 2013-07-21T10:22:07.790 回答
1

我找到了一种让它工作的方法：

从控制器中删除了这一行：

 $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来自服务器的信息（我不确定为什么）。

于 2013-07-17T17:12:28.073 回答