ui-bootstrap 分页在 ng-view 之外可以正常工作，但在 ng-view 中不能正常工作答案

【问题标题】：ui-bootstrap pagination works fine outside ng-view but not in ng-viewui-bootstrap 分页在 ng-view 之外可以正常工作，但在 ng-view 中不能正常工作
【发布时间】：2016-11-18 23:09:02
【问题描述】：

我想在我的一个数据表上的 ng-repeat 上应用 ui-bootstrap 分页。当表格在 ng-view 之外时它工作正常，但当它在 ng-view 过滤器和排序工作正常时，分页会出现以下错误。

指令“分页”的模板必须只有一个根元素。模板/分页/pagination.html

我在后端使用 spring rest 服务。

<script src="http://code.angularjs.org/1.2.16/angular-resource.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>

这些是我包含的文件。

控制器代码是

controller("FileController", function($window, $scope, $location) {


$scope.order = function (predicate) {  
  $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;  
  $scope.predicate = predicate;  
};  

$scope.paginate = function (value) {  
  var begin, end, index;  
  begin = ($scope.currentPage - 1) * $scope.numPerPage;  
  end = begin + $scope.numPerPage;  
  index = $scope.fileList.indexOf(value);  
  return (begin <= index && index < end);  
};

});

html中的分页标签是

<pagination total-items="totalItems" ng-model="currentPage"  
                                     max-size="10" boundary-links="true"  
                                     items-per-page="numPerPage" class="pagination-sm">  
                               </pagination>

【问题讨论】：

标签： angularjs twitter-bootstrap spring-mvc pagination

【解决方案1】：

请see this documentation。

我看不到您的代码，但我猜您的指令模板包含多个根元素。

原则上是这样，而不是这样做

<head>

</head>
<body>

</body>

做

<html>
    <head>

    </head>
    <body>

    </body>
</html>

【讨论】：

【解决方案2】：

验证您包含的 CSS 和 JS。还要观察您的浏览器控制台是否有错误。

我创建的示例将给您更多的洞察力。

DEMO

<script type="text/ng-template" id="about.html">
    <h1>About TODO</h1>
    <h4>{{todos.length}} total</h4>
    <ul>
      <li ng-repeat="todo in filteredTodos">{{todo.text}}</li>
    </ul>
    <pagination 
      ng-model="currentPage"
      total-items="todos.length"
      max-size="maxSize"  
      boundary-links="true">
    </pagination>
</script>

【讨论】：