JSFiddle - React, Tailwind, and code Playground

by southerd

HTML

<table ng:app="wh" ng:controller="Warehouse">
    <tr><th>Name</th><th>Manager</th></tr>
    <tr>
        <td ng:controller="Name">{{name}}</td>
        <td><person card="warehouse.manager" /></td>
    </tr>
</table>

CSS

td, th {
    border: solid thin;
    padding: 0 .3em;
}

JavaScript

var products = [{
    name: 'Hat',
    description: 'Tinfoil construction prevents the government from reading your thoughts',
    cost: 3},
{
    name: 'Shotgun',
    description: "Keep this one close and you'll survive the Zombie apocalypse in style",
    cost: 2}];

angular.module('wh', [])
.controller('Warehouse', function ($scope) {
    $scope.warehouse = {
        name: 'Main Warehouse',
        manager: {
            first_name: 'Charles',
            last_name: 'Goldthwait',
            email: '[email protected]'
        },
        location: {
            address: '123 Main',
            city: 'Billings',
            state: 'MT',
            zip: 59102
        },
        inventory: [{
            item: products[0],
            count: 30},
        {
            item: products[1],
            count: 24}]
    };
})
.controller('Name', function($scope){
    debugger;
    $scope.name = $scope.$root.warehouse.name;
})
.directive('person', function() {
    return {
        restrict: "E",
        replace: true,
        template: "<a href='mailto://{{card.email}}'>{{card.last_name}}, {{card.first_name}}</a>",
        link: function(scope, element, attrs) {
            scope.card = scope.$eval(attrs.card);
        }
    }
});