Question

我对Angular有点新，对Angular-Datatables模块来说是全新的。但是Angular-DT的文档对我来说并不适用。

按照说明，我已经通过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.的文档中使用与示例非常相似的代码。有没有人知道我可能会遗漏什么？提前谢谢！

Answer 1

问题是由您的脚本排序引起的 - 它应该是Jquery，Jquery-Datatables，Angular，Angular-Datatables，然后是您的应用程序脚本。

如果你先设置角度，你会得到你描述的加载错误 - 我同意，它可能在文档中更具描述性。

角度数据表（零配置？）

1 个答案: