Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

I wrote a dataTables directive for AngularJS. Its working fine except that i trying to add an button to the row that removes an row with an ng-click.

In my opinion is that the problem occurs because the table row doesn't now the scope.

Can somebody help me out solving this problem.

jsFiddle Example: http://jsfiddle.net/A5Zvh/7/

My directive looks like this.

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);
                }
            });
        }
    }
})
share|improve this question
 
jsFiddle please. –  SunnyShah Jan 23 at 11:30
1  
@SunnyShah done ;) –  user1266573 Jan 23 at 14:39
 
No body has an idea how to solve this problem? –  user1266573 Jan 30 at 11:11
 
Have you seen this post? Maybe, you can find some thing useful. stackoverflow.com/questions/14242455/… –  Ventura Aug 26 at 12:44
add comment

3 Answers

up vote 3 down vote

The delete function in your controller isn't called because AngularJS doesn't know anything about DataTables's insertion of those elements to the DOM, thus ngClick directive within those elements isn't compiled and linked. So change:

dataTable.fnAddData(data.aaData);

To

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

And to inject $compile service:

.directive('datatable', function () {

To

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

And your delete function is broken in the jsFiddle, hope that's not the case in your actual project!

share|improve this answer
 
I tried this but I'm getting a particularly nasty infinite loop –  Casey Flynn Apr 28 at 12:30
add comment
up vote 2 down vote

I solved this by going through each td and calling $compile. Using the datatable row callback function. Hope this helps.

options.fnCreatedCell =  function (nTd, sData, oData, iRow, iCol) {
    $compile(nTd)($scope);
}

//or row

options.fnCreatedRow = function( nRow, aData, iDataIndex ) {
    $compile(nRow)($scope);
}
share|improve this answer
 
I've been smashing my head to the wall with this issue. Have you got the code to make it work? Yours seems to be on the right path but dunno how to call it from within datatable. Thanks. –  coffekid Oct 23 at 1:51
add comment
up vote 0 down vote

You might want to give a look at the first couple of Zdam's post on this Google Groups thread, especially to his/her two linked jsFiddles. I basically copied them and they work at a basic level. I have not tried yet to get some action starting from a click on a row.

I see that you implemented a slightly different approach, recreating the <table> HTML node altogether. Not sure if this is causing issues.

By the way, on the scope.$watch call I had to make sure there was a third parameter set to true, in order to make value comparison (instead of reference comparison) on the returned resource$ object. Not sure why you don't need that.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.