Angularjs完全动态的jquery数据表重绘

Question

我有一个数据表，我想动态地动态更改其列和数据。但我有重绘表格的问题。我可以更改数据但是在单击更改按钮时无法更新列并重绘表格。

这是我的HTML代码

<button ng-click="change()">Change Table</button>
<table my-table="overrideOptions" 
        ao-columns="tblColumns" 
        aa-data="tblData" >
</table>

这是我的指示

dialogApp.directive('myTable', function() {
    return function(scope, element, attrs) {

        var options = {};
        if (attrs.myTable.length > 0) {
            options = scope.$eval(attrs.myTable);
        } else {
            options = {
                "bStateSave": true,
                "iCookieDuration": 2419200, /* 1 month */
                "bJQueryUI": true,
                "bPaginate": false,
                "bLengthChange": false,
                "bFilter": false,
                "bInfo": false,
                "bDestroy": true
            };
        }

        // Tell the dataTables plugin what columns to use
        // We can either derive them from the dom, or use setup from the controller           
        var explicitColumns = [];
        element.find('th').each(function(index, elem) {
            explicitColumns.push($(elem).text());
        });
        if (explicitColumns.length > 0) {
            options["aoColumns"] = explicitColumns;
        } else if (attrs.aoColumns) {
            options["aoColumns"] = scope.$eval(attrs.aoColumns);
        }

        // aoColumnDefs is dataTables way of providing fine control over column config
        if (attrs.aoColumnDefs) {
            options["aoColumnDefs"] = scope.$eval(attrs.aoColumnDefs);
        }

        var dataTable = element.dataTable(options);

        // watch for any changes to our data, rebuild the DataTable
        scope.$watch(attrs.aaData, function(value) {
            var val = value || null;
            if (val) {
                dataTable.fnClearTable();
                dataTable.fnDraw();
                dataTable.fnAddData(scope.$eval(attrs.aaData));
            }
        });
    };
});

这是我的控制器

function Ctrl($scope) {

    $scope.tblData = [
        ["Webber", "Adam"]
    ];

    // not mandatory, here as an example
    $scope.tblColumns = [
        { "sTitle": "Surname" },
        { "sTitle": "First Name" }
    ];

    // not mandatory, here as an example
    $scope.columnDefs = [{ "bSortable": false, "aTargets": [1] }];

    // not mandatory, you can use defaults in directive        
    $scope.overrideOptions = {
        "bStateSave": true,
        "iCookieDuration": 2419200, /* 1 month */
        "bJQueryUI": true,
        "bPaginate": false,
        "bLengthChange": false,
        "bFilter": false,
        "bInfo": false,
        "bDestroy": true
    };

    // we pretend that we have received new data from somewhere (eg a search)        
    $scope.addData = function(){
        //$scope.tblData.push(["jones", "henry"]); // BUG? Angular doesn't pick this up
        $scope.counter = $scope.counter+1;
        var existing = $scope.tblData.slice();
        existing.push([$scope.counter, $scope.counter*2]);
        $scope.tblData = existing;
    }
    $scope.counter = 0

    $scope.change = function(){
        console.log('Changing the view'); 
        $scope.tblData = [
            ["Michael", "Schumaer", "Ferrari"]
        ];

        // not mandatory, here as an example
        $scope.tblColumns = [
            { "sTitle": "Surname" },
            { "sTitle": "First Name" },
            { "sTitle": "Car" }
        ];
    }  
}