在将角度分页依赖项加载到模块中时遇到问题

我正试图将角度分页依赖项"angularUtils.directions.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.dirPaging，原因是：错误：[$injector:nomod]模块'angularUtils.directions.dirPagination'不可用！您拼错了模块名称或忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。"

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

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

这是最新消息。我更改了我的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>

哇，经过多次拔头发，我解决了这个问题@阿伦，你走在正确的道路上。。。注入依赖项的代码需要写如下：

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

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

原因尚不清楚。我认为，因为angular需要首先实例化原始模块"marbleApp"，所以它需要能够首先找到它，而不需要任何依赖。。。

不管怎样，我很欣赏这些想法。感谢

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

在控制器中添加更多行。。。要加载依赖项，控制器必须具有您需要的文件夹require（'regular-utils-pagination'）；

相关内容

最新更新

热门标签：