0
我是Angular JS的新手，同時使用了一個名爲angular-datatables（angular-datatables）的模塊。我按照入門指南瞭解腳本將如何加載。另外，我剛剛在基本用法選項卡上使用了零配置。但不知何故，它不會在預覽中按預期顯示。請參考下面Angular JS DataTables零配置
下面的截圖是我的源代碼：
HTML
<!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>app.js
個var app = angular.module('medrec', ['ngRoute','ngResource','ui.bootstrap','datatables'])
\t \t \t \t .constant('API_URL', window.location.href);controller.js
app.controller('mainCtrl',['$scope',
'API_URL',
\t function($scope, API_URL){
\t \t $scope.tabs = [
\t \t \t { title:'Dynamic Title 1', content:'Dynamic content 1' },
\t \t \t { title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }
\t \t ];
\t \t
\t \t $scope.alertMe = function() {
\t \t \t setTimeout(function() {
\t \t \t \t
\t \t \t });
\t \t };
\t \t
\t \t $scope.model = {
\t \t \t
\t \t };
\t \t
}]);注：我使用Laravel 5作爲我的後端。