jQuery handsontable with angularjs directive

Question

I'm trying to use jQuery handsontable with angular directive. However, when I type something in cells, the directive behaves in weird way that the typed characters appears at outside of the table. This doesn't happen when I initialize handsontable inside angular controller, not angular directive.

Here's jsfiddle

Heres's handsontable initialization code.

$(element).handsontable({
    data: $scope.data,
    columns: [{data: 'name'}, {data: 'age'}]                
})    

Does anybody know what's going on?

Answer 1

It looks like handsontable needs to be attached to a div.

One solution is to add replace: true to the directive:

myApp.directive('handsontable', function(){
    return {
        restrict: 'E',
        scope: {
            data: '='
        },
        replace: true,
        template: "<div></div>",
        link: function(scope, elem, attrs){
            $(elem).handsontable({
                data: scope.data,
                columns: [{data: 'name'}, {data: 'age'}]                
            })
        }
    }
})

Demo

Another solution is to restrict the directive to an attribute and change the markup from handsontable to a div:

<div handsontable data="data"></div>

Demo

Answer 2

It seems the problem is related to the template and the div.
When I integrated handsometable i used this configuration instead : jsfiddle

<div handsometable></div>

myApp.directive('handsometable', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var data = scope.data
            $(element).handsontable({
                data: data,
                colHeaders: ["Name", "Age"],
                rowHeaders: true
            });
        }
    };
})