JSFiddle - React, Tailwind, and code Playground

by rapsac

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
<script src="https://code.jquery.com/jquery-1.11.0.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<div ng-controller="MyCtrl">
    <label>Parent Scope Email:{{email}}</label>
    <simple-text-field simple-bind-to="email" simple-label="Email" simple-name="email" 
                 simple-placeholder="Enter email address" simple-dynamic-scope="user.email">
    </simple-text-field>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

myApp.directive('simpleTextField', function() {
    return {
        restrict: 'E',
        scope: {
            simpleBindTo: "=",
            simpleLabel: "@simpleLabel",
            simpleName: "@simpleName",
            simplePlaceholder: "@simplePlaceholder",
        },
        template: '<div class="form-group">' +
        '  <label class="col-sm-2 control-label" for="{{simpleName}}">{{simpleLabel}}</label>' +
        '  <div class="col-sm-10">' +
        '    <input type="text" class="form-control" name="{{simpleName}}" ' +
        '        placeholder="{{simplePlaceholder}}" ng-model="simpleBindTo" >' +
        '  </div>' +
        '</div>'
    };
});

myApp.controller('MyCtrl', function ($scope) {
    $scope.email = '';
});