无法将角度分页依赖项加载到模块中答案

【问题标题】：Having trouble loading angular pagination dependency into module无法将角度分页依赖项加载到模块中
【发布时间】：2017-02-01 16:29:41
【问题描述】：

我正在尝试将角度分页依赖项“angularUtils.directives.dirPagination”加载到我的模块中，但是当我这样做时，我收到“由于：...而无法实例化模块 marbleApp”错误。在尝试添加此依赖项之前，我的应用程序运行正常。这是一些代码。

app.js：

var marbleApp = angular.module("marbleApp", ['ui.router', 'angularUtils.directives.dirPagination']);

花岗岩.html：

<div class="container">
     <div class="row">   
        <div class="col m3" dir-paginate="material in graniteStuff | itemsPerPage: 20">
          <a href="{{ url }}"><div class="card">
            <div class="card-image small">
                <img src="">
            </div>
            <div class="card-content">
              <p>{{ material.material_name }}</p>
              <p>{{ material.material_country_of_origin }}</p>
            </div>
            </div>
          </a>
        </div>        
      </div>
    </div>

    <div ui-view></div>

    <dir-pagination-controls></dir-pagination-controls>

控制台中的完整错误如下：

"未能实例化模块 marbleApp，原因是：错误：[$injector:modulerr] 无法实例化模块 angularUtils.directives.dirPagination 由于：错误：[$injector:nomod] 模块“angularUtils.directives.dirPagination”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。”

我找不到任何语法错误，而且我很确定我正确地遵循了文档。有什么想法吗？

文档：https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination#basic-example

这是一个更新。我更改了我的 app.js 代码并能够添加 angularUtils 依赖项，现在我的应用程序再次运行。但是，分页功能在视图上不起作用，而不是重复数据库结果，它只是呈现其中一项......没有错误。什么坏了？

app.js

angular.module("marbleApp", ['angularUtils.directives.dirPagination']);

var marbleApp = angular.module("marbleApp", ['ui.router']);

html：

<div class="container">
     <div class="row">   
        <div class="col m3" dir-paginate="material in graniteStuff | itemsPerPage: 20">
          <a href="{{ url }}"><div class="card">
            <div class="card-image small">
                <img src="">
            </div>
            <div class="card-content">
              <p>{{ material.material_name }}</p>
              <p>{{ material.material_country_of_origin }}</p>
            </div>
            </div>
          </a>
        </div>        
      </div>
    </div>

    <div ui-view></div>

    <dir-pagination-controls></dir-pagination-controls>

【问题讨论】：

你的 JS 文件序列是什么。检查一下。
我几乎所有东西都在一个 app.js 文件中。我认为你可能是对的，但我什至不知道要寻找什么，这就是为什么我没有像应该的那样把所有东西分开哈
将 angularUtils.directives.dirPagination 模块代码放在 marbleApp 模块代码之前
谢谢，这似乎有帮助，但还没有完成。上面添加了更新...
你能提供任何 Plunkr/JSFiddle 你的问题吗？

标签： angularjs pagination

【解决方案1】：

哇，拉了很多头发后，我解决了这个问题！ @arun 你走在正确的道路上......注入依赖项的代码需要编写如下：

angular.module("marbleApp", []);


var marbleApp = angular.module("marbleApp", ['ui.router', 'angularUtils.directives.dirPagination']);

仍然不清楚为什么。我认为因为angular需要先实例化原始模块“marbleApp”，所以需要能够先找到它，没有任何依赖...

无论如何，我很欣赏这些想法。谢谢

【讨论】：

【解决方案2】：

看看https://plnkr.co/edit/37SLQVLQlb9LDKUbfwbC?p=preview。根据您的 JSON 创建示例。为什么

<div ui-view></div>

在控制器之外？

var app = angular.module('myApp', ['angularUtils.directives.dirPagination']);

app.controller('PaginateController', function($scope) {
  $scope.url = "www.example.com"
  $scope.graniteStuff = [
    {
      'material_name':'sample1',
      'material_country_of_origin':'IN'
    },
    {
      'material_name':'sample2',
      'material_country_of_origin':'US'      
    },
    {
       'material_name':'sample2',
      'material_country_of_origin':'AUS'    
    },
    {
      'material_name':'sample4',
      'material_country_of_origin':'IN'
    },
    {
      'material_name':'sample5',
      'material_country_of_origin':'US'      
    },
    {
       'material_name':'sample6',
      'material_country_of_origin':'AUS'    
    },
        {
      'material_name':'sample7',
      'material_country_of_origin':'IN'
    },
    {
      'material_name':'sample8',
      'material_country_of_origin':'US'      
    },
    {
       'material_name':'sample9',
      'material_country_of_origin':'AUS'    
    },
    {
      'material_name':'sample10',
      'material_country_of_origin':'IN'
    },
    {
      'material_name':'sample11',
      'material_country_of_origin':'US'      
    },
    {
       'material_name':'sample12',
      'material_country_of_origin':'AUS'    
    },
    ];
});

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
    <script src="pagitation.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="PaginateController">
    <div class="container">
     <div class="row">   
        <div class="col m3" dir-paginate="material in graniteStuff | itemsPerPage: 3">
          <a href="{{ url }}"><div class="card">
            <div class="card-image small">
                <img height=50px src="">
            </div>
            <div class="card-content">
              <p>{{ material.material_name }}</p>
              <p>{{ material.material_country_of_origin }}</p>
            </div>
            </div>
          </a>
        </div>        
      </div>
    </div>

    <div ui-view></div>

    <dir-pagination-controls></dir-pagination-controls>
  </body>

</html>

【讨论】：

【解决方案3】：

在您的控制器中添加更多行... 要加载依赖项，控制器必须具有您需要的文件夹 require('angular-utils-pagination');

【讨论】：