如何在我的情况下设置Angular/Bootstrap UI

How to setup Angular/Bootstrap UI in my case?

本文关键字:Angular Bootstrap UI 设置 情况下 我的      更新时间:2023-09-26

我在为我的应用程序设置Angular / bootstrap时遇到了麻烦

我在看这个页面的分页介绍。

http://angular-ui.github.io/bootstrap/

我app.js

angular.module('myApp', ['ngRoute','ui.bootstrap']).
    config(['$routeProvider', function($routeProvider) {
       ….
}]);

controller.js

angular.module('myApp', ['ngRoute']).
controller('PaginationCtrl',['$scope', function ($scope) {
  $scope.totalItems = 64;
  $scope.currentPage = 4;
  $scope.maxSize = 5;
  $scope.setPage = function (pageNo) {
    $scope.currentPage = pageNo;
  };
  $scope.bigTotalItems = 175;
  $scope.bigCurrentPage = 1;
}])
html

 <div id='pagination-wrapper' ng-controller='PaginationCtrl'>
 <pagination direction-links="false" total-items="totalItems" page="currentPage" num-pages="smallnumPages"></pagination>
</div>

当我加载页面时,我没有错误,但我似乎看不到分页功能。有人能帮我一下吗?非常感谢!

问题似乎是在那里重新声明依赖项。如果你从controller.js模块中移除ngRoute依赖,它就能工作了。您还可以删除不使用的示例变量。

angular.module('myApp').
    controller('PaginationCtrl',['$scope', function ($scope) {
        $scope.totalItems = 64;
        $scope.currentPage = 4;
}]);

工作示例:http://plnkr.co/edit/wpgoDrA2Z7pjXbgdNrM8?p=preview