JSFiddle - React, Tailwind, and code Playground

by asgoth

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
<div ng-controller='Ctrl'>
    <bootstrapinput model="lastName"
                    key="lastName"
                    localized="Surname"
                    formpath="playerForm.lastName"
                    required>
    </bootstrapinput>
</div>

JavaScript

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

app.directive("bootstrapinput", function($compile) {
    return {
        restrict: 'E',
        scope: {
            model: '='
        },
        link: function(scope, element, attrs) {
            var type = attrs.type || 'text';
            var required = attrs.hasOwnProperty('required') ? 'required' : '';
            var ngClazz = attrs.hasOwnProperty('formpath') ? 'ng-class="{error: ' + attrs.formpath + '.$invalid}"' : '';
            var htmlTemplate = '<div class="control-group" ' + ngClazz + '>' + '<label class="control-label" for="' + attrs.key + '">' + attrs.localized + '</label>' + '<div class="controls">' + '<input ng-model="' + attrs.model + '" type="' + type + '" id="' + attrs.key + '" name="' + attrs.key + '" placeholder="' + attrs.localized + '" ' + required + '   />' + '</div>' + '</div>';
            console.log(htmlTemplate);
            var compiled = $compile(htmlTemplate)(scope);

            element.replaceWith(compiled);
        }
    };
});

function Ctrl($scope) {
    $scope.lastName = 'Last Name';
}