JSFiddle - React, Tailwind, and code Playground

by drewsonne

HTML

<div ng-app="MyApp">
    <people></people>
</div>

JavaScript

angular.module('MyDirectives', []).directive('people', function () {
    return {
        restrict: 'E',
        scope: true,
        template: '' +
            '<table>' +
            '<thead>' +
            '<tr>' +
            '<th>Name</th>' +
            '<th>Age</th>' +
            '</tr>' +
            '</thead>' +
            '<tbody>' +
            '<person info="data[0]"></person>' +
            '<person info="data[1]"></person>' +
            '</tbody>' +
            '</table>',
        link: function($scope) {
            $scope.data = [
                {name: 'John', Age: 10},
                {name: 'Sally', Age: 20}
            ];
        }
    };
})
    .directive('person', function () {
    return {
        restrct: 'E',
        scope: {
            info : '='
        },
        template: '<tr ng-repeat=""><td>{{name}}</td><td>{{age}}</td></tr>'
    };
});

angular.module('MyApp', ['MyDirectives']);