JSFiddle - React, Tailwind, and code Playground

by dingen2010

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
    debugger;
    // Create a new module
    var app = angular.module("choreApp", []);

    app.controller("ChoreCtrl", function($scope) {
        $scope.logChore = function(chore) {
            alert(chore + "is done");
        }
    })

    app.directive("kid", function() {
        return {
            restrict: "E",
            scope: {
                done: "&"
            },
            template: '<input type="text" ng-model="chore">' + ' {{chore}}' + ' <div class="button" ngclick="done({chore:chore})">i m done</div>'
        }
    })
</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<div ng-app="choreApp">
    <div ng-controller="ChoreCtrl">
        <kid done="logChore(chore)"></kid>
    </div>
</div>