Jquery 角度数据表和数据表插件不工作

这将显示为“$scope.RegionData.withDOM不是函数”和“$scope.RegionData.withButtons不是函数”

它还将显示为“DTColumnBuilder未定义”

在我的控制器中，代码是作为调用编写的，所以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')

     ];
});

.controller（'RegionController'，函数（$scope，regionService）{
$scope.dtOptions=$scope.RegionData
.withDOM（“tp”）
.带按钮(
[
{extend:'copy'，className:'btn sm'}，
{扩展：'csv'，标题：'ExampleFile'，类名：'btn sm'}，
{扩展：'pdf'，标题：'ExampleFile'，类名：'btn sm'}，
{扩展：'print'，类名：'btn sm'}
]
);
$scope.dtColumns=
[
DTColumnBuilder.newColumn（'region_id'）。带标题（'region id'），
DTColumnBuilder.newColumn（'region_name'）。withTitle（'region name'），
DTColumnBuilder.newColumn（'region_code'）。带标题（'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显示在表中。

您没有将

DTOptionsBuilder

和

DTColumnBuilder

插入控制器中

因此，首先安装

*角度数据表*

。然后在控制器中注入：

DTOptionsBuilder

和

DTColumnBuilder

例：

---

是否安装了角度数据表（鲍尔组件）？

  <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>

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