Question

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

app.js：

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

granite.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>

Answer 1

哇，经过多次拔毛我解决了这个问题！ @arun你在正确的道路上......注入依赖关系的代码需要写成如下：

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


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

仍然不清楚为什么。我认为因为角度需要首先实例化原始模块＆＃34; marbleApp＆＃34;，它需要能够首先找到它，没有任何依赖...

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

Answer 2

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

<div ui-view></div>

在控制器之外？

＆＃13;

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'    
    },
    ];
});

＆＃13;

<!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>

＆＃13;

Answer 3

在控制器中添加更多行... 要加载依赖项，控制器必须具有您需要的文件夹要求（＆＃39;角utils的-分页＆＃39）;

无法将角分页依赖项加载到模块

3 个答案: