AngularJS Example

by pavlovt

HTML

<style>
    table { border: 1px solid black;}
    td { border: 1px solid black;}
</style>

<div ng-app="tables">
    <tbl>
        <cell>q1</cell>
        <cell>q2</cell>
        <cell>q3</cell>
    </tbl>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script type="text/javascript" src="https://code.angularjs.org/1.3.0-rc.0/angular.js"></script>

JavaScript

angular.module('tables',[])
    .directive('cell', function() {
        return {
            restrict: 'E',
            replace: true,
            transclude: true,
            template: '<td ng-transclude></td>'            
        }
    })
    .directive('tbl', function() {
        return {
            restrict: 'E',
            replace: true,
            transclude: true,
            template: '<table><tr ng-transclude></tr></table>'            
        }
    });