JSFiddle - React, Tailwind, and code Playground

by jank0003

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css">

<head lang="en">
  <title>Egghead Videos</title>
</head>
<body>

  <div ng-app="choreApp">
    <div ng-controller="ChoreCtrl as choreCtrl">
        <kid done="choreCtrl.logChore(chore)"></kid>
    </div>
    </div>

JavaScript

var app = angular.module("choreApp", []);

app.controller("ChoreCtrl", function() {
    var choreCtrl = this; 
    choreCtrl.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" ng-click="done({chore:chore})">I\'m done!</div>'
    };
});