角型のデータ型とデータ型のプラグインが機能していない

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形式でリターンです呼び出しとして書かれています。

<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要素が表に示されているよう

 .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') 

    ]; 
}); 

も私のインデックスファイル。

Answer 1

あなたは、コントローラ内部でDTOptionsBuilderとDTColumnBuilderを注入する逃しました。

最初に*angular-datatable*をインストールしてください。その後、あなたのコントローラーで注射：DTOptionsBuilderとDTColumnBuilder。

例：あなたは、角度-データテーブル（バウアー・コンポーネント）がインストールされている

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