Angular 应用在注入分页依赖项时无法运行

Question

我正在使用 AngularJs 构建一个简单的单页应用程序，它检索存储在基于服务器的应用程序上的数据。当我尝试注入分页指令时，应用程序无法运行，它只显示导航栏。我已遵循 this 教程。

此外，控制台没有显示任何错误。以下是我尝试实现分页的文件：

main.html:

<div class="page-header">
    <h2 id="tables">Pagination in Angular Js</h2>
</div>
<div ng-controller="UsersList">
    <table class="table striped">
        <thead>
            <tr>
                <th>Last Name</th>
                <th>First Name</th>
                <th>Created At</th>
                <!--<th>Status</th>-->
            </tr>
        </thead>
        <tbody>
            <tr dir-paginate="user in users | itemsPerPage: pageSize" current-page="currentPage">
                <td>{{user.last_name}}</td>
                <td>{{user.first_name}}</td>
                <td>{{user.created_at}}</td>
            </tr>
        </tbody>
    </table>
    <dir-pagination-controls boundary-links="true" max-size="10" template-url="app/main/dirPagination.tpl.html"></dir-pagination-controls>
</div>

main.js:

angular.module('Js-Users-App', ['angularUtils.directives.dirPagination']).controller('UsersList', UsersList);

UsersList.$inject = ['$scope', 'userDataFactory', 'angularUtils.directives.dirPagination'];

function UsersList($scope, userDataFactory){
    $scope.users = [];
    $scope.currentPage = 1;
    $scope.pageSize = 10;

    // Get the list of users
    userDataFactory.userList().then(function(response) {
        $scope.users = response.data;
    });
}

用户数据-factory.js:

angular.module('Js-Users-App').factory('userDataFactory', userDataFactory);

function userDataFactory($http) {
    return {
        userList: userList
    };

    function userList() {
        return $http.get("users.json").then(complete).catch(failed);
    }

    function complete(response) {
        return response;
    }

    function failed(error) {
        console.log(error.statusText);
    }
}

dir-paginate 在以下文件中声明：

<html ng-app="Js-Users-App">

<head>
    <meta charset="utf-8">
    <title>Js Users</title>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.min.css">
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>

</head>
<body>
    <nav class="white" role="navigation">
        <div class="nav-wrapper container">
            <a id="logo-container" href="#/" class="brand-logo">Js Users</a>
            <ul class="right hide-on-med-and-down">
                <li><a href="#/add">Add</a></li>
            </ul>

            <ul id="nav-mobile" class="side-nav">
                <li><a href="#/add">Add</a></li>
            </ul>
            <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
        </div>
    </nav>

    <div class="container">
        <div ng-view></div>
    </div>



    <script src="node_modules/angular/angular.min.js"></script>
    <script src="node_modules/angular-route/angular-route.min.js"></script>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/materialize-css/dist/js/materialize.min.js"></script>
    <!--<script src="js/ui-bootstrap-2.5.0.min.js"></script>-->
    <script src="js/dirPagination.js"></script>

    <script type="text/javascript" src="app/app.js"></script>
    <script type="text/javascript" src="app/main/main.js"></script>
    <script type="text/javascript" src="app/user-data-factory/user-data-factory.js"></script>

</body>
</html>

脚本位于 js 文件夹中。该应用程序在一个简单的 Web 服务器上运行，以 python -m SimpleHTTPServer 开头。我找不到问题所在。也因为我仍然不知道如何很好地调试。是因为应用程序没有加载新指令吗？谢谢。

更新 1
我已经向您展示了项目结构和整个代码：http://plnkr.co/edit/LoICEnE5nkwLDvsu7URD

Answer 1

ng-app 不应在 <html> 元素上定义，除非另有证明。当加载 jQuery 时，这可能会导致不良行为。

jQuery 应该在 Angular 和其他可能使用它的依赖项（Materialize）之前加载。

Js-Users-App 正在重新定义模块：

angular.module('Js-Users-App', ['angularUtils.directives.dirPagination']).controller('UsersList', UsersList);

这消除了路由器配置，因此应用程序不执行任何操作。该模块应定义一次，并包含所有模块依赖项：

angular.module("Js-Users-App", ["ngRoute", 'angularUtils.directives.dirPagination'])

在那之后 angular.module("Js-Users-App") 应该只用作 getter（没有第二个参数）。

UsersList 控制器无缘无故地注入 angularUtils.directives.dirPagination，这将导致错误，因为没有这样的服务 - 这是一个指令。应该省略。

Angular 应用在注入分页依赖项时无法运行

Angular App doesn't work when injecting a pagination dependency

javascript

pagination

angularjs

angularjs-controller