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 に答える