angularjs分頁：未知的提供者：ngTableParamsProvider

Question

我想實現分頁角js。 我是新來的角js。

我得到這個錯誤在瀏覽器中：

錯誤：[$注射器：unpr] http://errors.angularjs.org/1.3.15/ $噴油器/ unpr P0 = ngTableParamsProvider％20％3 C-％20ngTableParams％20％3 C-％20allUsersCtrl

我已經包括在佈局視圖的HEAD部分這些文件：

<!-- angular js---> 
    <script src="<?php echo base_url();?>angular/js/angular.min.js"></script> 
    <script src="<?php echo base_url();?>angular/js/angular-route.min.js"></script> 
    <!-- flash msg --> 
    <script src="<?php echo base_url();?>angular/js/angular-flash.js"></script> 
    <!-- flash msg --> 
    <!--loading bar--> 
    <script src="<?php echo base_url();?>angular/js/loading-bar.min.js"></script> 
    <script src="<?php echo base_url();?>angular/js/angular-animate.min.js"></script> 
    <script src="<?php echo base_url();?>angular/js/ng-table.min.js"></script> 
    <!--loading bar--> 

    <script src="<?php echo base_url();?>angular/js/demo_angular.js"></script> 
    <script src="<?php echo base_url();?>angular/js/app.js"></script> 

這是我在部分HTML表格：

<table ng-table="tableParams" class="table table-striped table-bordered table-hover" id="table_all_users"> 
            <thead> 
             <tr> 
              <th width="20%"><input type="checkbox" name="chk_all" id="chk_all" onchange="checkAll(this)" /> Select</th> 
              <th width="15%">Sr. No.</th> 
              <th width="35%"><a href="" ng-click="reverse=!reverse;order('username', reverse)">User Name</a></th> 
              <th width="25%"><a href="" ng-click="reverse=!reverse;order('fname', reverse)">First Name</a></th> 
              <th width="25%"><a href="" ng-click="reverse=!reverse;order('lname', reverse)">Last Name</a></th> 
              <th width="15%"><a href="" ng-click="reverse=!reverse;order('mobile', reverse)">Mobile</a></th> 
              <th width="15%"><a href="" ng-click="reverse=!reverse;order('email', reverse)">Email</a></th> 
              <th width="15%">Action</th> 
             </tr> 
            </thead> 

            <tbody ng-init="get_users()"> 
             <tr class="gradeX" ng-repeat="user in allUsers | filter:query"> 
              <td width="20%"><input type="checkbox" name="list[]" class="chk_all" value="" id="" onclick="uncheck_select_all(this);" /></td> 
              <td width="15%">{{ $index + 1 }}</td> 
              <td width="35%">{{ user.username }}</td> 
              <td width="25%">{{ user.fname }}</td> 
              <td width="25%">{{ user.lname }}</td> 
              <td width="15%">{{ user.mobile }}</td> 
              <td width="15%">{{ user.email }}</td> 
              <td width="15%"><a title="Edit User" href="#/edit_user/{{user.user_id}}" ><span class="fa fa-pencil"></span></a> | <a title="Delete User" id="" style="cursor:pointer;" ng-click="delete_user(user.user_id)" ><span class="fa fa-trash-o"></span></a></td> 
             </tr> 

            </tbody> 
           </table> 

這是腳本。

var angularControllers = angular.module('angularControllers', ['flash']); 

angularControllers.controller('allUsersCtrl', ['$scope','$http','$filter','Flash','ngTableParams', function($scope,$http,$filter,Flash,ngTableParams){ 
    $scope.get_users = function() 
     { 
      $http.get("../admin/users/angular_all_users").success(function(data) 
      { 
       $scope.allUsers = data;  
      }); 
     } 
    //for sorting by table column 
    var orderBy = $filter('orderBy'); 
    $scope.order = function(predicate, reverse) 
    { 
     $scope.allUsers = orderBy($scope.allUsers, predicate, reverse); 
    } 
    //table pagination 
    $scope.tableParams = new ngTableParams({ 
     page: 1,   // show first page 
     count: 10   // count per page 
    }, { 
     total: data.length, // length of data 
     getData: function ($defer, params) { 
      $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
     } 
    }) 


}]); 

當我加入這裏：[ '閃'， 'ngTable'] 仍然提示錯誤：數據沒有定義

試圖實現分頁後也是我數據不會顯示，只顯示標題行。

請給我建議任何解決方案或任何鏈接，將一步的GUID一步做分頁

Answer 1

我給你的建議是始終在$ http.get中初始化ng表。它必須是這樣的：

$http.get('../admin/users/angular_all_users').success(function (data) { 
      $scope.tableParams = new ngTableParams({ 
       page: 1, 
       count: 10 
      }, 
      { 
       total: data.length, 
       getData: function ($defer, params) { 
     // use build-in angular filter for ordering 
     var orderedData = params.sorting() ? 
       $filter('orderBy')(data, params.orderBy()) : data; 

     $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
    } 
}); 
    }); 

有了這個「最佳實踐」你永遠避免問題data與它的性質是不確定的。

不要忘記在你的模塊中包含ngTable。

希望這會推動你前進。

此致敬禮！

Answer 2

你得到，因爲你想包括一個名爲ngTableParams依賴我認爲這是所謂的ngTable模塊中的錯誤你沒有包括在內。

如果您還包含該模塊，則會得到未定義的數據。這是因爲你在行

total: data.length, // length of data 

使用data變量，但你還沒有宣佈使用前variabled。我想你錯過了。

您只需檢查錯誤中的行號即可確定問題所在。嘗試放置斷點，以便您可以輕鬆追蹤問題。

Answer 3

我也滿足了這個錯誤

/** 
* @ngdoc service 
* @name ngTableParams 
* @description Backwards compatible shim for lowercase 'n' in NgTableParams 
*/ 
angular.module('ngTable').factory('ngTableParams', ['NgTableParams', function(NgTableParams) { 
    return NgTableParams; 
}]); 

上面的代碼可以在角ngtable.js發現，但是當我更換此，或更改ngtableParams爲大寫我不使用這個版本，我成功（支持建議）。