角度數據表和數據表插件不工作

Question

這將顯示爲「$ scope.RegionData.withDOM不是函數」，也是「$ scope.RegionData.withButtons不是函數」。

並且它也會顯示爲「DTColumnBuilder未定義」。

<div ng-controller="RegionController"> 
    <div class="col-lg-12"> 
    <div class="panel-body"> 
     <div class="table-responsive"> 
       <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped table-bordered table-hover"> 
      </table> 
     </div> 
    </div> 
    </div> 
    </div> 

在我的控制器代碼被寫爲調用，所以API是以json格式返回。

 .controller('RegionController', function($scope , regionService) { 
    $scope.dtOptions = $scope.RegionData 
    .withDOM("<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>tp") 
    .withButtons(
     [ 
     {extend: 'copy',className: 'btn-sm'}, 
     {extend: 'csv',title: 'ExampleFile', className: 'btn-sm'}, 
     {extend: 'pdf', title: 'ExampleFile', className: 'btn-sm'}, 
     {extend: 'print',className: 'btn-sm'} 
     ] 
    ); 
    $scope.dtColumns = 
    [ 
      DTColumnBuilder.newColumn('region_id').withTitle('Region ID'), 
      DTColumnBuilder.newColumn('region_name').withTitle('Region Name'), 
      DTColumnBuilder.newColumn('region_code').withTitle('Region Code'), 
      DTColumnBuilder.newColumn('created_by').withTitle('Created By') 

    ]; 
}); 

的也是我的索引文件被寫成

<link rel="stylesheet" href="app/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css" /> 
<!-- App styles --> 
<link rel="stylesheet" href="app/fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css" /> 
<link rel="stylesheet" href="app/fonts/pe-icon-7-stroke/css/helper.css" /> 
<link rel="stylesheet" href="app/styles/style.css"> 

<script type="text/javascript" src="app/bower_components/jquery/dist/jquery.min.js"></script> 
<script type="text/javascript" src="app/bower_components/jquery-ui/jquery-ui.min.js"></script> 
<script type="text/javascript" src="app/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script> 

<script type="text/javascript" src="app/JSCRIPT/bootstrap/dist/js/bootstrap.min.js"></script> 

<script type="text/javascript" src="app/bower_components/Flot/jquery.flot.js"></script> 
<script type="text/javascript" src="app/bower_components/Flot/jquery.flot.resize.js"></script> 
<script type="text/javascript" src="app/bower_components/Flot/jquery.flot.pie.js"></script> 


<script type="text/javascript" src="app/bower_components/flot.curvedlines/curvedLines.js"></script> 
<script type="text/javascript" src="app/bower_components/jquery.flot.spline/index.js"></script> 
<script type="text/javascript" src="app/bower_components/metisMenu/dist/metisMenu.min.js"></script> 
<script type="text/javascript" src="app/bower_components/iCheck/icheck.min.js"></script> 

<script type="text/javascript" src="app/bower_components/datatables/media/js/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="app/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script> 
<script type="text/javascript" src="app/bower_components/pdfmake/build/pdfmake.min.js"></script> 
<script type="text/javascript" src="app/bower_components/pdfmake/build/vfs_fonts.js"></script> 
<script type="text/javascript" src="app/bower_components/datatables.net-buttons/js/buttons.html5.min.js"></script> 
<script type="text/javascript" src="app/bower_components/datatables.net-buttons/js/buttons.print.min.js"></script> 
<script type="text/javascript" src="app/bower_components/datatables.net-buttons/js/dataTables.buttons.min.js"></script> 
<script type="text/javascript" src="app/bower_components/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script> 

<script type="text/javascript" src="app/angular/angular.js"></script> 
<script type="text/javascript" src="app/angular/angular-route.js"></script> 
<script type="text/javascript" src="app/bower_components/angular-flot/angular-flot.js"></script> 
<script type="text/javascript" src="app/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> 
<script type="text/javascript" src="app/bower_components/angular-datatables/dist/plugins/buttons/angular-datatables.buttons.min.js"></script> 
<script type="text/javascript" src="app/bower_components/angular-datatables/dist/angular-datatables.min.js"></script> 

和這個div顯示錶。

Answer 1

你錯過了注射DTOptionsBuilder和DTColumnBuilder控制器內。

所以先安裝*angular-datatable*。然後在您的控制器注入：DTOptionsBuilder和DTColumnBuilder。

例：

.controller('RegionController', function($scope , regionService, DTOptionsBuilder, DTColumnBuilder) { }