12

AngularJS の dataTables ディレクティブを作成しました。ng-clickで行を削除するボタンを行に追加しようとしていることを除いて、うまく機能しています。

私の意見では、テーブルの行がスコープではないために問題が発生するということです。

誰かがこの問題を解決するのを手伝ってくれますか?

jsFiddle の例: http://jsfiddle.net/A5Zvh/7/

私のディレクティブは次のようになります。

angular.module('DataTables', [])
.directive('datatable', function() {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        require: 'ngModel',
        template: '<table></table>',
        link: function(scope, element, attrs, model) {
            var dataTable = null,
                options;

            var buttons = jQuery.parseJSON(attrs['buttons']) || null;

            options  = {
                    "bJQueryUI": false,
                    "sDom": "<'row-fluid'<'span4'l><'span8 filter' <'pull-right'T> <'pull-right'f>>r>t<'row-fluid'<'span6'i><'span6'p>>",
                    "sPaginationType": "bootstrap",
                    "oTableTools": {
                    }
                };

            if(_.has(attrs, 'datatableOptions')) {
                jQuery.extend(true, options, scope.$eval(attrs['datatableOptions']));
            }

            scope.$watch(attrs.ngModel, function(data) {
                if(data && _.size(data.aaData) > 0 && _.size(data.aoColumns) > 0) {

                    _.extend(options, scope.$eval(attrs.ngModel))
                    dataTable = $(element).dataTable(options);
                    dataTable.fnClearTable();
                    dataTable.fnAddData(data.aaData);
                }
            });
        }
    }
})
4

5 に答える 5

24

私はAngular-datatblesを使用しており、データテーブル行へのリンクを動的に追加、編集および削除し、ng-click でモーダルを表示しようとしていました。

これが私の場合の解決策でした。

$scope.dtOptions.withOption('fnRowCallback',
     function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        $compile(nRow)($scope);
     });

すべてのデータテーブル バインディング コード。

$scope.reloadData = function () {
    $scope.dtOptions.reloadData();
};

$scope.dtColumnDefs = [

    DTColumnDefBuilder.newColumnDef(2).renderWith(function (data, type, row) {
        var html = '<a href="" class="txt-color-blue pull-left" ng-click="editModal()"><i class="fa fa-pencil hidden-xs"></i> Edit</a>' +
                   '<a href="" class="txt-color-red padding-top-15" ng-click="removeModal()"><i class="fa fa-times hidden-xs"></i> Remove</a>';
        return html;
    })
];

$scope.dtColumns = [
    DTColumnBuilder.newColumn('name').withTitle('Name'),
    DTColumnBuilder.newColumn('type').withTitle('Type'),
    DTColumnBuilder.newColumn('id').withTitle(''),
];

$scope.dtOptions.withOption('fnRowCallback',
     function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        $compile(nRow)($scope);
     });
于 2014-09-02T16:46:07.310 に答える
3

AngularJS は DataTables によるこれらの要素の DOM への挿入について何も知らないため、コントローラーの削除機能は呼び出されません。したがって、これらの要素内の ngClick ディレクティブはコンパイルおよびリンクされません。だから変更：

dataTable.fnAddData(data.aaData);

に

dataTable.fnAddData(data.aaData);
$compile(element)(scope);

$compile サービスを挿入するには:

.directive('datatable', function () {

に

.directive('datatable', function ($compile) {

そして、あなたの削除機能はjsFiddleで壊れています。実際のプロジェクトではそうではないことを願っています!

于 2013-02-06T20:11:41.900 に答える
0

この Google グループ スレッドでの Zdam の投稿の最初の 2 、特に彼/彼女の 2 つのリンクされた jsFiddles を参照することをお勧めします。私は基本的にそれらをコピーしましたが、それらは基本的なレベルで機能します。行のクリックから始まるアクションを取得することはまだ試していません。

<table>HTMLノードを完全に再作成するという、わずかに異なるアプローチを実装したようです。これが問題を引き起こしているかどうかはわかりません。

ところで、scope.$watch返された resource$ オブジェクトで (参照比較ではなく) 値比較を行うために、呼び出し時に true に設定された 3 番目のパラメーターがあることを確認する必要がありました。なぜそれが必要ないのかわかりません。

于 2013-03-04T19:32:29.780 に答える