ng-table使用筆記-遇到的問題及解決方案

ngTable 是 AngularJS 表格指令，項目中有時候會用到表格，若是項目不用angularJS，之前用js循環生成表格的方法不算複雜，但是若是引用了angularJS的話，表格使用ngTable 卻更方便。
項目中初次使用ngTable時候，博主和隊友遇到了一些問題，今天總算有些時間總結記錄一下，以免以後再跳坑。也希望對大家有所幫助。

先看官方demo（地址：http://ng-table.com/#/）,從官方demo中可以看到，要先引用 angular.js 和 ng-table.min.js ，在聲明應用模塊的時候，也要添加 ngTable：

var myApp = angular.module('myApp',['ngTable']);

以上都是最基礎的配置。看起來確實不復雜，但是博主和隊友卻屢次跳坑。先來看一段代碼：

<table ng-table="warnList" show-filter="false">
       <tr ng-repeat="warns in $data | filter:proNameFil" class="warnTr">
           <td data-title="'名稱'" sortable="'warnName'"><a href="#/editWarn/{{warns.ruleId}}">{{warns.ruleName}}</a></td>
           <td data-title="'適用項目'" class="b_l" sortable="'applyPro'">
               <span ng-repeat="y in warns.itemList">{{y.ITEM_NAME}}<em>/</em></span>
           </td>
           <td data-title="'狀態'">
               <span ng-if="warns.activity == 1" class="cp" ng-click="stateCut($event)">啓用</span>
           </td>
           <td data-title="'操作'"><span data-id="{{warns.ruleId}}" ng-click="warnDel($event)">刪除</span></td>
       </tr>
   </table>

從這段代碼可以看到的：
1、爲表格提供的數組是 warnList

2、沒有應用過濾功能（不寫這句話也行，默認值是false）

3、有的列使用了排序功能

那麼我們都跳過哪些坑呢？有技術的也有非技術的
1、報錯：Error: [$injector:itkn]
我們這個問題的原因是在另外一個頁面的controller中忘了引入NgTableParams

angular.module('myApp.wController',["ngTable"])
.controller('wConfig',['NgTableParams'],function (NgTableParams) {

})

2、報錯：TypeError: t.reload is not a function

出現這個問題的原因並不是唯一的，我自己遇到這個問題是因爲在給循環的數組加載數據之前定義了一個空數組，然後HTML在加載數據的時候還沒完全執行加載數據的函數，導致取不到數據，所以報這個錯。

你已經猜到這個問題的解決辦法了對不對？沒錯，只要把那個初始定義的空數組註釋就行了（請注意第一行）：

// $scope.warnList = [];//數據集合
var succCallBack = function(res) {
    var data = res.data.rule;
    if (data) {
        $scope.warnList = res.data.rule;
    }
}
var errCallBack = function (res) {
};
dataService.go(dataService.interfaces.getSeleList,dataService.methods.get,param,succCallBack,errCallBack);

這個問題解決了，看起來是沒什麼問題了。在一個模塊的代碼寫好之後，其他模塊就可以直接拿過來用，直接改一下名字就行了，這也是提高效率的方法之一。但是一個同事（我是前端，他是後臺Java）在複製了我的代碼之後，卻還是報錯，在對着官網demo仔細比照了一番，檢查了js、HTML之後還是沒發現有什麼問題，也沒什麼不一樣。在他打算重寫的時候，博主發現了HTML中的一個小問題，後來試了一下，正是這個“小問題”引發了一系列大問題：

<table ng-table="warnList" show-filter="false">
       <tr ng-repeat="warns in $data | filter:proNameFil" class="warnTr">
           <td data-title="'名稱'" sortable="'warnName"><a href="#/editWarn/{{warns.ruleId}}">{{warns.ruleName}}</a></td>
           <td data-title="'適用項目'" class="b_l" sortable="'applyPro'">
               <span ng-repeat="y in warns.itemList">{{y.ITEM_NAME}}<em>/</em></span>
           </td>
       </tr>
   </table>

不知道你們發現了這個問題沒有：

我那可愛的隊友在設置 sortable 值的時候，不小心刪掉了雙引號裏面的一個單引號！寫代碼的人都知道，代碼裏的一個符號都不能少：
sortable=“‘warnName’”這個雙引號表示是sortable的值，而裏面的單引號是’warnName’這個字符串，也是必不可少的。

然而有個在上海的team小組成員（博主當時在北京）也是第一次使用ngTable,就直接複製了博主寫好的代碼直接用，他自己反覆檢查，覺得和我寫的一模一樣了，還是報錯，後來不得已纔給我發了 js代碼的截圖問我怎麼回事，我也覺得他的 js 寫的沒什麼問題，就讓他發過來HTML代碼，後來經過一番檢查才發現：就是因爲和我寫的一模一樣纔會報錯的，他在HTML中的數組名字和在 js 中的名字不一致（複製了HTML忘了改名字了！！/笑哭、笑哭）