文章/答案/技术大牛

发布

社区首页 >问答首页 >将角度分页依赖项加载到模块时出现问题

问将角度分页依赖项加载到模块时出现问题
EN

Stack Overflow用户

提问于 2016-04-14 20:27:48

回答 3查看 1.8K关注 0票数 1

我正在尝试将角度分页依赖项'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>

angularjs

pagination

回答 3

Stack Overflow用户

发布于 2016-04-15 04:09:09

哇，经过一番努力我解决了这个问题！@arun你走对了路…注入依赖关系的代码需要编写如下：

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


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

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

不管怎样，我很感谢你的想法。谢谢

票数 1

Stack Overflow用户

发布于 2016-04-14 23:11:06

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

票数 0

Stack Overflow用户

发布于 2017-01-28 00:06:34

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36623116

复制

相似问题

问将角度分页依赖项加载到模块时出现问题
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将角度分页依赖项加载到模块时出现问题EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将角度分页依赖项加载到模块时出现问题
EN