nggrid - 样式的分页选项

Question

我正在使用ng-grid，并想知道是否有人知道如何将自定义样式应用于分页选项。 我只有一个前一个和下一个按钮，并且不需要pagessize，总项目，转到第一个，转到最后一个等等。

我知道有一个footerOptions值（即使这不在文档中）.. 我已经尝试基于how to create a nggrid custom footer实现一些东西，首先放入整个默认的页脚模板：

<div ng-show="showFooter" class="ngFooterPanel" ng-class="{'ui-widget-content': jqueryUITheme, 'ui-corner-bottom': jqueryUITheme}" ng-style="footerStyle()">
<div class="ngTotalSelectContainer" >
    <div class="ngFooterTotalItems" ng-class="{'ngNoMultiSelect': !multiSelect}" >
        <span class="ngLabel">{{i18n.ngTotalItemsLabel}} {{maxRows()}}</span><span ng-show="filterText.length > 0" class="ngLabel">({{i18n.ngShowingItemsLabel}} {{totalFilteredItemsLength()}})</span>
    </div>
    <div class="ngFooterSelectedItems" ng-show="multiSelect">
        <span class="ngLabel">{{i18n.ngSelectedItemsLabel}} {{selectedItems.length}}</span>
    </div>
</div>
<div class="ngPagerContainer" style="float: right; margin-top: 10px;" ng-show="enablePaging" ng-class="{'ngNoMultiSelect': !multiSelect}">
    <div style="float:left; margin-right: 10px;" class="ngRowCountPicker">
        <span style="float: left; margin-top: 3px;" class="ngLabel">{{i18n.ngPageSizeLabel}}</span>
        <select style="float: left;height: 27px; width: 100px" ng-model="pagingOptions.pageSize" >
            <option ng-repeat="size in pagingOptions.pageSizes">{{size}}</option>
        </select>
    </div>
    <div style="float:left; margin-right: 10px; line-height:25px;" class="ngPagerControl" style="float: left; min-width: 135px;">
        <button class="ngPagerButton" ng-click="pageToFirst()" ng-disabled="cantPageBackward()" title="{{i18n.ngPagerFirstTitle}}"><div class="ngPagerFirstTriangle"><div class="ngPagerFirstBar"></div></div></button>
        <button class="ngPagerButton" ng-click="pageBackward()" ng-disabled="cantPageBackward()" title="{{i18n.ngPagerPrevTitle}}"><div class="ngPagerFirstTriangle ngPagerPrevTriangle"></div></button>
        <input class="ngPagerCurrent" min="1" max="{{maxPages()}}" type="number" style="width:50px; height: 24px; margin-top: 1px; padding: 0 4px;" ng-model="pagingOptions.currentPage"/>
        <button class="ngPagerButton" ng-click="pageForward()" ng-disabled="cantPageForward()" title="{{i18n.ngPagerNextTitle}}"><div class="ngPagerLastTriangle ngPagerNextTriangle"></div></button>
        <button class="ngPagerButton" ng-click="pageToLast()" ng-disabled="cantPageToLast()" title="{{i18n.ngPagerLastTitle}}"><div class="ngPagerLastTriangle"><div class="ngPagerLastBar"></div></div></button>
    </div>
</div>

     $scope.gridOptions = {
        data: 'myData',
        enablePaging: true,
        showFooter: true,
        totalServerItems: 'totalServerItems',
        enableCellSelection: false,
        enableRowSelection: false,
        footerTemplate: "<div ng-show=\"showFooter\" class=\"ngFooterPanel\" ng-class=\"{'ui-widget-content': jqueryUITheme, 'ui-corner-bottom': jqueryUITheme}\" ng-style=\"footerStyle()\">" +
    "<div class=\"ngTotalSelectContainer\" >" +
        "<div class=\"ngFooterTotalItems\" ng-class=\"{'ngNoMultiSelect': !multiSelect}\" >" +
            "<span class=\"ngLabel\">{{i18n.ngTotalItemsLabel}} {{maxRows()}}</span><span ng-show=\"filterText.length > 0\" class=\"ngLabel\">({{i18n.ngShowingItemsLabel}} {{totalFilteredItemsLength()}})</span>" +
        "</div>" +
        "<div class=\"ngFooterSelectedItems\" ng-show=\"multiSelect\">" +
            "<span class=\"ngLabel\">{{i18n.ngSelectedItemsLabel}} {{selectedItems.length}}</span>" +
        "</div>" +
    "</div>" +
    "<div class=\"ngPagerContainer\" style=\"float: right; margin-top: 10px;\" ng-show=\"enablePaging\" ng-class=\"{'ngNoMultiSelect': !multiSelect}\">" +
        "<div style=\"float:left; margin-right: 10px;\" class=\"ngRowCountPicker\">" +
            "<span style=\"float: left; margin-top: 3px;\" class=\"ngLabel\">{{i18n.ngPageSizeLabel}}</span>" +
            "<select style=\"float: left;height: 27px; width: 100px\" ng-model=\"pagingOptions.pageSize\" >" +
                "<option ng-repeat=\"size in pagingOptions.pageSizes\">{{size}}</option>" +
            "</select>" +
        "</div>" +
        "<div style=\"float:left; margin-right: 10px; line-height:25px;\" class=\"ngPagerControl\" style=\"float: left; min-width: 135px;\">" +
            "<button class=\"ngPagerButton\" ng-click=\"pageToFirst()\" ng-disabled=\"cantPageBackward()\" title=\"{{i18n.ngPagerFirstTitle}}\"><div class=\"ngPagerFirstTriangle\"><div class=\"ngPagerFirstBar\"></div></div></button>" +
            "<button class=\"ngPagerButton\" ng-click=\"pageBackward()\" ng-disabled=\"cantPageBackward()\" title=\"{{i18n.ngPagerPrevTitle}}\"><div class=\"ngPagerFirstTriangle ngPagerPrevTriangle\"></div></button>" +
            "<input class=\"ngPagerCurrent\" min=\"1\" max=\"{{maxPages()}}\" type=\"number\" style=\"width:50px; height: 24px; margin-top: 1px; padding: 0 4px;\" ng-model=\"pagingOptions.currentPage\"/>" +
            "<button class=\"ngPagerButton\" ng-click=\"pageForward()\" ng-disabled=\"cantPageForward()\" title=\"{{i18n.ngPagerNextTitle}}\"><div class=\"ngPagerLastTriangle ngPagerNextTriangle\"></div></button>" +
            "<button class=\"ngPagerButton\" ng-click=\"pageToLast()\" ng-disabled=\"cantPageToLast()\" title=\"{{i18n.ngPagerLastTitle}}\"><div class=\"ngPagerLastTriangle\"><div class=\"ngPagerLastBar\"></div></div></button>" +
        "</div>" +
    "</div>" +
"</div>",
        pagingOptions: $scope.pagingOptions,
        filterOptions: $scope.filterOptions,
        columnDefs: [{ field: 'ContactName', displayName: 'Contact Name', width: 150 },// cellTemplate: '<div>{{row.entity[col.field]}}</div><div><img src="http://lorempixel.com/50/50/sports/"/></div>'
                    { field: 'Role', displayName: 'Role', width: 150 }]
    };

但是，当我这样做时，它会加载分页选项，但每次单击分页控件时都会重新加载页面。 删除footerTemplate选项会加载相同的页脚，但不会每次都重新加载页面。 有什么提示吗？

由于 丹尼

编辑：

看起来我发布的帖子中的标记不正确..我拿了当前正在渲染的标记，删除了我想要的元素，并且它有效：

$scope.gridOptions = {
        data: 'myData',
        enablePaging: true,
        showFooter: true,
        totalServerItems: 'totalServerItems',
        enableCellSelection: false,
        enableRowSelection: false,
        footerTemplate:"<div ng-grid-footer=\"\" class=\"ng-scope\"><div ng-show=\"showFooter\" class=\"ngFooterPanel ng-scope\" ng-class=\"{'ui-widget-content': jqueryUITheme, 'ui-corner-bottom': jqueryUITheme}\" ng-style=\"footerStyle()\" style=\"width: 600px; height: 55px;\">"+

        "<div class=\"ngPagerContainer ngNoMultiSelect\" style=\"float: right; margin-top: 10px;\" ng-show=\"enablePaging\" ng-class=\"{'ngNoMultiSelect': !multiSelect}\">"+

           " <div style=\"float:left; margin-right: 10px; line-height:25px;\" class=\"ngPagerControl\">"+
               "<button type=\"button\" class=\"ngPagerButton\" ng-click=\"pageBackward()\" ng-disabled=\"cantPageBackward()\" title=\"Previous Page\"><div class=\"ngPagerFirstTriangle ngPagerPrevTriangle\"></div></button>"+
                " <button type=\"button\" class=\"ngPagerButton\" ng-click=\"pageForward()\" ng-disabled=\"cantPageForward()\" title=\"Next Page\" disabled=\"disabled\"><div class=\"ngPagerLastTriangle ngPagerNextTriangle\"></div></button>"+
              "  </div>"+
        "</div>"+
    "</div></div>",
        pagingOptions: $scope.pagingOptions,
        filterOptions: $scope.filterOptions,
        columnDefs: [{ field: 'ContactName', displayName: 'Contact Name', width: 150 },// cellTemplate: '<div>{{row.entity[col.field]}}</div><div><img src="http://lorempixel.com/50/50/sports/"/></div>'
                    { field: 'Role', displayName: 'Role', width: 150 }]
    };