在 angular js 应用程序中使用 ui.bootstrap

Question

我正在开发一个 angular 应用程序，它需要 table 进行分页。我试过使用 dir-pagination by Michael Bromley 但当我尝试使用 angular.module('myApp', ['angularUtils.directives.dirPagination']); 时效果不佳然后我尝试使用 ui.bootstrap 但这也没有成功。事实上，即使留下一个空的方括号也会导致空白页。没有方括号，应用程序运行正常。

我已经通过 SO 并发现了类似的问题 (Angular gives blank page when i use ui.bootstrap in my controller)，但我没有找到任何可以解决我的问题的方法。

我还没有为分页编码，但这应该很容易！我真正的问题是我无法理解为什么我得到的是空白页。

但是我尝试在具有单个页面和控制器的应用程序上使用 dir-pagination 和 ui.bootstrap 并且它工作正常。但是我需要在具有多个页面和控制器的复杂应用程序上使用这些指令。

这是造成这么多麻烦的代码。

var app = angular.module('myApp', ['ui.bootstrap']);

app.controller('myCtrl',function ($scope) {
    $scope.users = [{ "id": 1, "first_name": "Heather", "last_name": "Bell", "hobby": "Eating" },
                    { "id": 2, "first_name": "Andrea", "last_name": "Dean", "hobby": "Gaming" },
                    { "id": 3, "first_name": "Peter", "last_name": "Barnes", "hobby": "Reading Books" },
                    { "id": 4, "first_name": "Harry", "last_name": "Bell", "hobby": "Youtubing" },
                    { "id": 5, "first_name": "Deborah", "last_name": "Burns", "hobby": "Fishing" },
                    { "id": 6, "first_name": "Larry", "last_name": "Kim", "hobby": "Skipping" },
                    { "id": 7, "first_name": "Jason", "last_name": "Wallace", "hobby": "Football" },
                    { "id": 8, "first_name": "Carol", "last_name": "Williams", "hobby": "Baseball" },
                    { "id": 9, "first_name": "Samuel", "last_name": "Olson", "hobby": "Programming" },
                    { "id": 10, "first_name": "Donna", "last_name": "Evans", "hobby": "Playing DOTA" },
                    { "id": 11, "first_name": "Lois", "last_name": "Butler", "hobby": "Gaming" },
                    { "id": 12, "first_name": "Daniel", "last_name": "Hill", "hobby": "surfing" },
                    { "id": 13, "first_name": "Matthew", "last_name": "Torres", "hobby": "cycling" },
                    { "id": 14, "first_name": "Jerry", "last_name": "Hernandez", "hobby": "Music" },
                    { "id": 15, "first_name": "Christopher", "last_name": "Carpenter", "hobby": "Football" },
                    { "id": 16, "first_name": "Harold", "last_name": "West", "hobby": "Gaming" },
                    { "id": 17, "first_name": "Carol", "last_name": "Hicks", "hobby": "Youtubing" },
                    { "id": 18, "first_name": "Bonnie", "last_name": "Davis", "hobby": "Partying" },
                    { "id": 19, "first_name": "Nancy", "last_name": "Banks", "hobby": "Photography" },
                    { "id": 20, "first_name": "Walter", "last_name": "Freeman", "hobby": "Tweeting" },
                    { "id": 21, "first_name": "Louis", "last_name": "Gonzales", "hobby": "Bloging" },
                    { "id": 22, "first_name": "Jean", "last_name": "Watkins", "hobby": "Bloging" },
                    { "id": 23, "first_name": "Albert", "last_name": "Harris", "hobby": "Music" },
                    { "id": 24, "first_name": "Billy", "last_name": "Owens", "hobby": "Camping" },
                    { "id": 25, "first_name": "Russell", "last_name": "Patterson", "hobby": "Singing" }];

    $scope.sort = function (keyname) {
        $scope.sortKey = keyname;   //set the sortKey to the param passed
        $scope.reverse = !$scope.reverse; //if true make it false and vice versa
    }
});

我是 AngularJS 的初学者，不知道如何解决这个问题。我经历了一些 plunkers，但他们都实现了单页应用程序。

预先感谢您的回复！

**回答了我自己的问题

Answer 1

4 年后回答这个问题，AngularJS 现在已经是老古董了，但也许它可能对某人有所帮助。

我在另一个文件中为 'myApp' 声明了另一个应用程序模块，这就是显示错误的原因。

在 angular js 应用程序中使用 ui.bootstrap

using ui.bootstrap in angular js application

pagination

angularjs

angular-ui-bootstrap