Angular: Empty Fiddle

http://angularjs.org/

by GruffBunny

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="http://handsontable.com/dist/jquery.handsontable.full.js"></script>
<link rel="stylesheet" href="http://handsontable.com/dist/jquery.handsontable.full.css">
<div ng-controller="MyCtrl">
    <p>init in cotroller</p>
    <div id="table"></div>
    <br />
    <p>init in directive</p>
    <div handsontable data="data"></div>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.data = [
        {name: 'a', age:10},
        {name: 'b', age:11},
        {name: 'c', age:12}
    ]
    $("div#table").handsontable({
        data: $scope.data,
        columns: [{data: 'name'}, {data: 'age'}]                
    })    
}

myApp.directive('handsontable', function(){
    return {
        restrict: 'A',
        scope: {
            data: '='
        },
        link: function(scope, elem, attrs){
            $(elem).handsontable({
                data: scope.data,
                columns: [{data: 'name'}, {data: 'age'}]                
            })
        }
    }
})