Question

我是Angular JS的新手，也是一个名为angular-datatables（angular-datatables）的模块。我按照入门指南来了解脚本的加载方式，另外，我只是在基本用法选项卡上使用了零配置。但不知何故，它在预览中不会像预期的那样显示出来。请参阅下面的屏幕截图

这是我的源代码：

HTML

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>test</title>

    <!-- Bootstrap -->
    <link href="[[ asset('/css/bootstrap.min.css') ]]" rel="stylesheet">

    <!-- Angular DataTables -->
    <link href="[[ asset('/css/angular/angular-datatables.min.css') ]]" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
  </head>
  <body ng-app="medrec">
    <div class="container-fluid">
      <div class="row">
        <nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
              <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
              </form>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>
      </div>
      <br/><br/><br/><br/><br/>
      <div class="row">
        <div class="col-md-12">
          <div ng-controller="mainCtrl">
            <uib-tabset active="active">
              <uib-tab index="0" heading="Static title">
                <table datatable class="row-border hover">
                  <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>
              </uib-tab>
              <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
                {{tab.content}}
              </uib-tab>
              <uib-tab index="3" select="alertMe()">
                <uib-tab-heading>
                  <i class="glyphicon glyphicon-bell"></i> Alert!
                </uib-tab-heading>
                I've got an HTML heading, and a select callback. Pretty cool!
              </uib-tab>
            </uib-tabset>
          </div>
        </div>
      </div>
    </div>

    <!-- jQuery  -->
    <script src="[[ asset('/js/jquery.2.2.3.min.js') ]]"></script>

    <!-- jQuery DataTables -->
    <script src="[[ asset('/js/jquery.dataTables.min.js') ]]"></script>

    <!-- AngularJS Library -->
    <script src="[[ asset('/app/lib/angular/angular.min.js') ]]"></script>
    <script src="[[ asset('/app/lib/angular/angular-datatables.min.js') ]]"></script>
    <script src="[[ asset('/app/lib/angular/angular-animate.min.js') ]]"></script>
    <script src="[[ asset('/app/lib/angular/angular-route.min.js') ]]"></script>
    <script src="[[ asset('/app/lib/angular/angular-touch.min.js') ]]"></script>
    <script src="[[ asset('/app/lib/angular/angular-resource.min.js') ]]"></script>
    <script src="[[ asset('/app/lib/angular/angular.ui-bootstrap.min.js') ]]"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="[[ asset('/js/bootstrap.min.js') ]]"></script>

    <!-- AngularJS Module/Controllers -->
    <script src="[[ asset('/app/app.js') ]]"></script>
    <script src="[[ asset('/app/controller/main-controller.js') ]]"></script>

  </body>
</html>

＆＃13;

app.js

＆＃13;

var app = angular.module('medrec', ['ngRoute','ngResource','ui.bootstrap','datatables'])
				 .constant('API_URL', window.location.href);

＆＃13;

controller.js

＆＃13;

app.controller('mainCtrl',['$scope',
                           'API_URL',
	function($scope, API_URL){
		$scope.tabs = [
		   	{ title:'Dynamic Title 1', content:'Dynamic content 1' },
		   	{ title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }
	   	];
		
		$scope.alertMe = function() {
			setTimeout(function() {
				
			});
		};
		
		$scope.model = {
		   	
		};
		
}]);

＆＃13;

注意：我使用的是Laravel 5作为我的后端。

Answer 1

为了所有人的利益，我已经解决了这个问题

dataTables.bootstrap.min.css和jquery.dataTables.min.js

到标题部分以及添加

table table-hover table-bordered

到表元素的类

<table datatable class="table table-hover table-bordered table-striped">

Angular JS DataTables零配置

1 个答案: