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中

回答

相關問題