2

テーブルのデータ ソースとして BootGrid データ テーブルと JSON ファイルを使用しています。

サービス

.service('datatableService', ['$resource', function($resource){
        this.getDatatable = function(id, email, date) {
            var datatableList = $resource("data/data-table.json");

            return datatableList.get ({
                id: id,
                email: email,
                date: date
            })
        }
    }])

コントローラ

.controller('datatableCtrl', function($scope, datatableService){

        //Get Data Table Data
        $scope.id = datatableService.id;
        $scope.email = datatableService.email;
        $scope.date = datatableService.date;

        $scope.dtResult = datatableService.getDatatable($scope.id, $scope.email, $scope.date);


    })

指令

.directive('bootgrid', ['$timeout', function($timeout){
    return {
        restrict: 'A',
        link: function(scope, element, attr){
            $('#data-table-basic').bootgrid({
                css: {
                    icon: 'md icon',
                    iconColumns: 'md-view-module',
                    iconDown: 'md-expand-more',
                    iconRefresh: 'md-refresh',
                    iconUp: 'md-expand-less'
                }

            });
        }   
    }
}])

HTML

<div class="table-responsive" data-ng-controller="datatableCtrl">
        <table id="data-table-basic" class="table table-striped" data-bootgrid>
            <thead>
                <tr>
                    <th data-column-id="id" data-type="numeric">ID</th>
                    <th data-column-id="sender">Sender</th>
                    <th data-column-id="received" data-order="desc">Received</th>
                </tr>
            </thead>
            <tbody>
                <tr data-ng-repeat="w in dtResult.list">
                    <td>{{ w.id }}</td>
                    <td>{{ w.email }}</td>
                    <td>{{ w.date }}</td>
                </tr>
            </tbody>
        </table>
    </div>

これを実行すると、内部にデータが取得されません<tbody>が、ディレクティブを削除すると、すべての JSON データがテーブル内にレンダリングされていることがわかります。ng-repeat と and ディレクティブの両方が連携して動作するようにします。ディレクティブの優先度を次のように設定しようとしましたが、

...
   return {
        restrict: 'A',
        priority: 1001,
        ...

しかし、運がありません。http://plnkr.co/edit/rWCVXTjxOGZ49CeyIn9d?p=preview

これを修正するのを手伝ってください。上記のペンを直していただければ幸いです。

よろしく

4

1 に答える 1