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

Question

我正在研究角度应用程序，需要对表进行分页。我曾经尝试使用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的初学者，不知道如何解决该问题。我经历了一些调试器，但是它们都实现了一个页面应用程序。

感谢您的答复！

**回答了我自己的问题

Answer 1

四年后回答这个问题，现在AngularJS是恐龙，但也许对某人有帮助。

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