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

我试图角分页依赖“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由于：错误：[$注射器：modulerr]未能实例模块angularUtils.directives.dirPagination由于：错误：[$注射器：NOMOD]模块“angularUtils .directives.dirPagination'不可用！您拼错了模块名称或忘记加载模块名称。如果注册一个模块确保您指定的依赖关系作为第二个参数。”

我无法找到任何语法错误，我敢肯定我是正确遵循了文档。有什么想法？

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

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

一pp.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>

来源

2016-04-14 MattP

什么是你的JS文件序列。检查一下。 –

我几乎所有的东西都在一个app.js文件中。我认为你可能是对的，但我甚至不知道要寻找什么，这就是为什么我没有把所有东西都分开的原因应该是ha – MattP

将** angularUtils.directives.dirPagination **模块代码放在* * 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="[email protected]" 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>

来源

2016-04-14 15:11:06

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

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


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

仍不清楚为什么。我认为，因为角度需要先初始化原始模块“marbleApp”，它需要能够先找到它，没有任何依赖关系......

不管怎么说，我很欣赏的想法。谢谢

来源

2016-04-14 20:09:08 MattP

在您的控制器中添加更多行... 加载依赖关系控制器必须拥有您需要的文件夹 require（'angular-utils-pagination'）;

来源

2017-01-27 16:06:34

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

回答

相关问题