Angular Datatables（零配置？）

我對Angular有點新，對Angular-Datatables模塊也是全新的。然而，Angular-DT的文檔對我來說並不合適。Angular Datatables（零配置？）

按照說明，我已經通過Bower安裝了Angular-Datatables，在我的index.html中包含了JS文件，並在我的模塊中聲明瞭依賴關係。這裏是我的controller.js文件的內容：

'use strict'; 

/* Controllers */ 

angular.module('myApp.controllers', ['datatables']) 
    .controller('MyCtrl1', ['$scope', function($scope) { 

    }]) 
    .controller('MyCtrl2', ['$scope', function($scope) { 

    }]);

這裏是partial1.html文件中的表格：

<table datatable=""> 
    <thead> 
     <tr> 
      <th>ID</th> 
      <th>First name</th> 
      <th>Last name</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>Foo</td> 
      <td>Bar</td> 
     </tr> 
     <tr> 
      <td>123</td> 
      <td>Someone</td> 
      <td>Youknow</td> 
     </tr> 
     <tr> 
      <td>987</td> 
      <td>Iamout</td> 
      <td>Ofinspiration</td> 
     </tr> 
    </tbody> 
</table>

這裏是我的index.html：

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> < 

![endif]--> 
<!--[if IE 7]>   <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]--> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>DataTables: Bach</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css"> 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css"> 
    <!--datatables style--> 
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css"> 
    <link rel="stylesheet" href="css/app.css"/> 
    <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script> 
</head> 
<body> 
    <ul class="menu"> 
    <li><a href="#/view1">view1</a></li> 
    <li><a href="#/view2">view2</a></li> 
    </ul> 

    <!--[if lt IE 7]> 
     <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
    <![endif]--> 

    <div ng-view></div> 

    <!-- In production use: 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> 
    --> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-route/angular-route.js"></script> 
    <script src="js/app.js"></script> 
    <script src="js/services.js"></script> 
    <script src="js/controllers.js"></script> 
    <script src="js/filters.js"></script> 
    <script src="js/directives.js"></script> 
    <!--jquery--> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <!--datatables--> 
    <script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script> 
    <!--angular-datatables--> 
    <script src="bower_components/angular-datatables/dist/angular-datatables.js"></script> 
</body> 
</html>

我的瀏覽器顯示一個正常表格，並在表格下方顯示一條消息：正在加載...

我在文檔中使用了非常類似的代碼，標題爲Zero Configuration.有沒有人知道我可能錯過了什麼？提前致謝！

來源

2014-07-18 ArthurianConan

以下是Zero Config中的[plunkr]（http://plnkr.co/edit/t0Mx7vQfNHfcNkpJyLOe?p=preview）。沒有「正在加載...」。如果代碼中出現問題，可能是其他地方。 – Goodzilla

感謝Goodzilla。我的沮喪是，我不知道代碼中還有哪些地方需要注意。實際上只有3個文件需要修改......我希望文檔能夠多顯示一點。 – ArthurianConan