Angularjs数据表 - 编辑/删除选项

Question

我有angularjs数据表，我想编辑或删除表格行。所有文档和示例都是唯一的jquery解决方案。我想在内联编辑或点击打开弹出窗口后进行编辑。这里是jquery解决方案https://editor.datatables.net/examples/styling/envelopeInTable.html，但我不知道如何将其转换为angularjs，这里是有角度的方式但是，它不是工作代码，没有任何解释来进行编辑。 http://l-lin.github.io/angular-datatables/archives/#!/bindAngularDirective

这是我的代码

app.controller('benchBaseConfig', ['$compile', '$scope', '$http', '$location', 'DTOptionsBuilder', 'DTColumnBuilder',
function RowSelect($compile, $scope, $http, $location, DTOptionsBuilder, DTColumnBuilder) {
    var vm = this;
    vm.message = '';



    function getUserTokenFromLocalStorage(localStorage) {
        var authData = [];
        for (key in localStorage) {
            if (key == "ls.authorizationData") {
                authData = localStorage[key];
            }

        }

        var jsonObj = JSON.parse(authData);
        return jsonObj.token;
    };  

    vm.message = '';
    vm.someClickHandler = someClickHandler;
    vm.dtOptions = DTOptionsBuilder.newOptions()
        .withOption('ajax', {
            url: 'data.json',
            type: 'POST',
            headers: {
                'xtoken': 'Bearer ' + getUserTokenFromLocalStorage(localStorage)
            }
        })
        // or here
        .withDataProp('data')
        .withOption('processing', true)
        .withOption('serverSide', true)
        .withOption('rowCallback', rowCallback)
        .withOption('createdRow', function(row, data, dataIndex) {
            $compile(angular.element(row).contents())($scope);
        })
        .withOption('headerCallback', function(header) {
            if (!vm.headerCompiled) {
                vm.headerCompiled = true;
                $compile(angular.element(header).contents())($scope);
            }
        })
        .withPaginationType('full_numbers')
    vm.dtColumns = [
        DTColumnBuilder.newColumn('serial_nr').withTitle('serial_nr'),
        DTColumnBuilder.newColumn('token').withTitle('token'),

        DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable()
        .renderWith(function(data, type, full, meta) {
            return '<button class="btn btn-warning" ng-click="edit(' + full.serial_nr + ')">' +
                '   <i class="fa fa-edit"></i>' +
                '</button>&nbsp;' +
                '<button class="btn btn-danger" ng-click="delete(' + full.serial_nr + ')">' +
                '   <i class="fa fa-trash-o"></i>' +
                '</button>';
        })
    ];



    function someClickHandler(info) {
        vm.message = info.id;

    }

    function rowCallback(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        $('td', nRow).unbind('click');
        $('td', nRow).bind('click', function() {
            $scope.$apply(function() {
                vm.someClickHandler(aData);
            });
        });
        return nRow;
    }


 $scope.edit = function(id) {
    console.log('Editing ' + id);
    // Edit some data and call server to make changes...
    // Then reload the data so that DT is refreshed
    $scope.dtOptions.reloadData();
};
$scope.delete = function(id) {
    console.log('Deleting' + id);
    // Delete some data and call server to make changes...
    // Then reload the data so that DT is refreshed
   return $http.delete('www.testtest.re/' + id).then(function() {
        // wait for the response to complete, or the deleted entry is still shown in the table
        $scope.dtOptions.reloadData();
   });        
};
}
]);

这是html

 <div class="table-responsive ng-cloak">
    <h3>{{'KLUPE' | translate}} {{'KLUPE_SPEC' | translate}}</h3>
    <table id="strip_table" datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" dt-instance="showCase.dtInstance" class="dataTable row-border table-hover">

    </table>
</div>