JSFiddle - React, Tailwind, and code Playground

by Josh Carroll

HTML

<script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.0-rc.3/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<div ng-controller="Ctrl">
    <ul>
        <task-editor ng-repeat="task in tasks" task="task" save-task="saveTask(task)"></task-editor>
    </ul>
</div>

JavaScript

(function () {
    angular.element(document).ready(function () {
        var app = angular.module('myApp', []);

        app.directive("taskEditor", function(){
            return {
                restrict:'E',
                scope: {
                    task:'=',
                    saveTask:'&'
                },
                template: '<li><input type="text" ng-model="task.name" /><button type="button" ng-click="saveTask({task:task})">Save</button></li>'
                
            };
        });
        
        app.controller("Ctrl", function ($scope) {
            $scope.tasks = [{
                name: 'foo'
            }, {
                name: 'bar'
            }];

            $scope.saveTask = function(task){
                alert("Widget: " + task.name + " saved!");
            };
        });

        angular.bootstrap(document, ['myApp']);
    });


}());