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。所以，我认为我至少下载了必要的库。我觉得我没有正确地注射datatables。但是，它看起来对我来说是正确的。然而，排序不起作用，DTOptionsBuilder打印未定义。

我做错了什么？

Answer 1

未正确提供

Inline Array Annotation 正确的方法是：

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

在Controller中使用angular-datatables DTOptions

1 个答案: