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'}]
})
}
}
})
Another solution is to restrict the directive to an attribute and change the markup from handsontable to a div:
<div handsontable data="data"></div>