無法加載角分頁依賴到模塊

我試圖角分頁依賴「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

無法加載角分頁依賴到模塊

回答

相關問題