Angularjs完全动态jquery数据表重绘

我有一个datatable，我想动态地更改它的列和数据。但我对重新绘制表格有问题。我可以更改数据，但单击“更改”按钮时无法更新列并重新绘制表

这是我的html代码

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

这是我的控制器

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" }
        ];
    }  
}

---

无法动态更改aoColumn属性post表初始化。是否有解决方法？我在网上找不到。不，不幸的是没有。唯一的方法是用新列动态创建一个新的datatable。谢谢，我会试试的。

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" }
        ];
    }  
}