百慕大角js三角：$資源+指令+分頁

Question

嗨角js專家，

我很困惑使用$資源，指令和分頁。我想要的是創建一個表格指令，可以排序，過濾和分頁。
有一些已經創建的表組件，但我在我的angularjs學習過程的開始，所以我想了解如何創建這樣的事情。
另外我讀了很多論壇和stackoverflow線程，我有一個部分解決方案，但仍然沒有工作解決方案。

所以我創建了一個指令：

app.directive("customTable", function($compile, $document) { 
    function link(scope, element, attrs) { 
     var html = "<table><tr>"; 
     html += "<td style='width: {{ h.width }} px;white-space: nowrap;' ng-repeat='h in headers'>"; 
     html += "<input style='width: {{ h.width }};display: block;' type='text' ng-model='filters[h.column]'> </td> </tr>"; 
     html += "<tr ng-repeat='record in customTableData"; 
     var htmlTableTd = ""; 
     var arrayLength = scope.headers.length; 
     for (var i = 0; i < arrayLength; i++) { 
      html += " | filter:{" + scope.headers[i].column + ":filters." + scope.headers[i].column + "}"; 
      htmlTableTd += "<td>{{ record." + scope.headers[i].column + " }}</td>"; 
     } 
     html += "'>"; 
     html += htmlTableTd; 
     html += "</tr> </table>"; 
     element.html(html); 
     $compile(element.contents())(scope); 
    } 

    return { 
     restrict: "E", 
     link: link 
    }; 
}); 

和控制器：

app.controller("administration.service.controller", function ($scope, $resource) { 
    $scope.headers = [ 
     {column: "name", width: "150px"}, 
     {column: "serviceType", width: "100px"} 
    ]; 
    $scope.filters = {}; 
    var serviceManager = $resource("list"); 
    $scope.customTableData = serviceManager.query(); 
}); 

我試圖用引導分頁，但我應該在指令（在ngRepeat）使用一些過濾customTableData。然而，由於customTableData是承諾，並且構建指令時尚未處理，因此它是空的，即過濾後的customTableData也將爲空。一種解決方案是在控制器中使用then（...）方法，並從控制器調用指令的功能，但我不知道該怎麼做，它似乎不是一個優雅的解決方案。
有沒有針對我的問題的優雅解決方案？

謝謝，
尤

Answer 1

我的溶液中，見下文（我用下面的2個樣品，感謝它們：http://jsfiddle.net/2ZzZB/56/，http://jsfiddle.net/7czsM/1/）

指令：

app.filter('startFrom', function() { 
    return function(input, start) { 
     start = +start; //parse to int 
     return input.slice(start); 
    } 
}); 

app.directive("customTable", function($compile, $document) { 

    function link(scope, element, attrs) { 
     // variables for pagination 
     scope.currentPage = 0; 
     scope.pageSize = 10; 
     scope.numberOfPages=function(){ 
      return Math.ceil(scope.filteredCustomTableData.length/scope.pageSize);     
     } 

     // for sorting 
     scope.sort = { 
      column: '', 
      descending: false 
     }; 

     scope.changeSorting = function(column) { 
      var sort = scope.sort; 
      if (sort.column == column) { 
       sort.descending = !sort.descending; 
      } else { 
       sort.column = column; 
       sort.descending = false; 
      } 
     }; 

     var arrayLength = scope.headers.length; 
     var html = "<table> <tr>"; 
     // 1. building the header 
     for (var i = 0; i < arrayLength; i++) { 
      html += "<th ng-click='changeSorting(\"" + scope.headers[i].column + "\")'> " + scope.headers[i].label + " </th>"; 
     } 
     // 2. building the filters 
     html += "</tr> <tr> <td style='width: {{ h.width }} px;white-space: nowrap;' ng-repeat='h in headers'>"; 
     html += "<input style='width: {{ h.width }};display: block;' type='text' ng-model='filters[h.column]'> </td> </tr>"; 
     // 3. building the table rows 
     // sample: <tr ng-repeat='record in (filteredCustomTableData = (customTableData | filter:{name:filters.name} | filter:{serviceType:filters.serviceType}) | startFrom:currentPage*pageSize | limitTo:pageSize | orderBy:sort.column:sort.descending')>" 
     html += "<tr ng-repeat='record in (filteredCustomTableData = (customTableData"; 

     var htmlTableTd = ""; 
     // first creating the filters in the ngRepeat (| filter:{name:filters.name} | filter:{serviceType:filters.serviceType}| ...) 
     // and after that adding the real table rows -> 
     for (var i = 0; i < arrayLength; i++) { 
      html += " | filter:{" + scope.headers[i].column + ":filters." + scope.headers[i].column + "}"; 
      htmlTableTd += "<td>{{ record." + scope.headers[i].column + " }}</td>"; 
     } 
     html += " | orderBy:sort.column:sort.descending) | startFrom:currentPage*pageSize | limitTo:pageSize)'>"; 
     html += htmlTableTd; 
     html += "</tr> </table>"; 

     // adding the pagination buttons 
     html += "<button ng-disabled='currentPage == 0' ng-click='currentPage=currentPage-1'>Previous</button>{{currentPage+1}}/{{numberOfPages()}}"; 
     html += "<button ng-disabled='currentPage >= filteredCustomTableData.length/pageSize - 1' ng-click='currentPage=currentPage+1'>Next</button>"; 

     element.html(html); 
     $compile(element.contents())(scope); 
    } 

    return { 
     restrict: "E", 
     link: link 
    }; 

}); 

控制器：

app.controller("administration.service.controller", function ($scope, $resource) { 

    $scope.headers = [ 
     {column: "name", width: "150px", label: "Name"}, 
     {column: "serviceType", width: "100px", label: "Service Type"} 
    ]; 

    $scope.filters = {}; 

    var serviceManager = $resource("list"); 

    $scope.customTableData = serviceManager.query(); 
});