在 Angular js 应用程序中使用 ui.bootstrap答案

【问题标题】：using ui.bootstrap in angular js application在 Angular js 应用程序中使用 ui.bootstrap
【发布时间】：2016-05-16 08:14:04
【问题描述】：

我正在开发一个需要对表格进行分页的 Angular 应用程序。我曾尝试使用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，但它们都实现了一个单页应用程序。

提前感谢您的回复！

**回答了我自己的问题

【问题讨论】：

您能否发布页面空白时出现在控制台中的错误消息？
控制台中没有错误信息！除了 CSS 警告。

标签： angularjs pagination angular-ui-bootstrap

【解决方案1】：

在 4 年后回答这个问题，AngularJS 现在是恐龙，但也许它可能会对某人有所帮助。

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

【讨论】：