Question

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

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

我在后端使用春假服务。

<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>

Answer 1

请see this documentation。

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

所以在原则上，而不是做

<head>

</head>
<body>

</body>

做

<html>
    <head>

    </head>
    <body>

    </body>
</html>

Answer 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>

ui-bootstrap分页在ng-view之外工作正常但在ng-view中不行

2 个答案: