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

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

指令'分页'的模板必须只有一个根元素。 template/pagination/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>

来源

2016-11-18 vikram kerure

请see this documentation。

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

所以在原则上，而不是做

<head> 

</head> 
<body> 

</body>

做

<html> 
    <head> 

    </head> 
    <body> 

    </body> 
</html>

来源

2016-11-18 14:41:40 trichetriche

验证包括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>

来源

2016-11-18 15:09:02 user3249448

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

回答

相关问题