javascript - 在 Controller 中使用 Angular 数据表 DTOptions

Question

我正在使用 angular-datatables在一个项目中。我是这样使用它的:

<table datatable="ng" class="table table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>First</th>
      <th>Last</th>
      <th>Occupation</th>
    </tr>
  </thead>

  <tbody>
    <tr ng-repeat="person in people">
      <td>{{person.Id}}</td>
      <td>{{person.FirstName}}</td>
      <td>{{person.LastName}}</td>
      <td>{{person.Job}}</td>
    </tr>
  </tbody>
</table>

奇怪的是，表格呈现了。但是，它的行为不像数据表。未加载排序。有没有办法让我检查 datatables 是否已加载？在我的页面中，我有以下内容:

<link href="/libs/datatables/media/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="/libs/angular-datatables/dist/datatables.bootstrap.min.css" rel="stylesheet"/>

<script src="/libs/jquery/dist/jquery.min.js"></script>
<script src="/libs/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="/libs/angular/angular.min.js"></script>
<script src="/libs/angular-datatables/dist/angular-datatables.min.js"></script>
<script src="/js/app.js"></script>

angular.bootstrap($('#myApp'), ['myApp']);

MyApp 是手动引导的，因为页面上有多个应用程序。 app.js 具有以下内容:

'use strict';
var myApp = angular.module('myApp', ['ngAnimate', 'ui.bootstrap', 'datatables', 'app.components']);

myApp.controller('MyController', ['$scope', 
function ($scope, DTOptionsBuilder, DTColumnDefBuilder) {
  console.log(DTOptionsBuilder);
}])
;

console.log 语句打印undefined。这对我来说意味着 datatables 没有被加载。但是，我不确定如何确认这一点。我在控制台窗口中没有看到任何 404。所以，我假设我至少在下载必要的库。感觉我没有正确注入(inject) datatables。但是，它对我来说看起来是正确的。然而，排序不起作用，DTOptionsBuilder 正在打印未定义。

我做错了什么？

Answer 1

Inline Array Annotation 未正确提供正确的做法是:

myApp.controller('MyController', ['$scope', 'DTOptionsBuilder', 'DTColumnDefBuilder',
function ($scope, DTOptionsBuilder, DTColumnDefBuilder) {
  console.log(DTOptionsBuilder);
}])
;