Directive input element name

Setting the name on an input element so that can show validation errors.

by vaiism

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc4.min.js"></script>
<p>Testing Setting of the name on an element</p>
<hr/>
<div ng-app="interfaceSettings" ng-controller="TestDirective">
    <ul>
        <li><b>AngularVersion:</b> {{settings.angularVersion.full}}</li>
        <li><b>ServerType:</b> {{settings.serverType}}</li>
        <li><b>ServerName:</b> {{settings.serverName}}</li>
    </ul>
    <hr/>
    
    <div id="validationError" style="display:none;" class="alert_box error" ng:show="settingsForm.$invalid">
        <b style="color:red;">There Were Errors:</b><br/>
    <ul>
        <li ng-show="settingsForm.serverName.$error.required"><b>Required: </b> ServerName</li>
        <li ng-show="settingsForm.serverType.$error.required"><b>Required: </b> ServerType</li>
    </ul>
</div>
    
    
    <hr/>
    <form name="settingsForm">
        <label>ServerName</label> <input type="text" ng-model="settings.serverName" name="serverName" required/><br/><br/>
        <ei-text-field model="settings.serverType" label="ServerType" input-name="serverType" required="true"/>
    </form>
    
</div>

CSS

body {
    padding: 10px; 
    font-family: sans-serif; 
    font-size: 0.9em;
}
form label {font-weight:bold;margin-right:10px;font-size:0.9em;}
form label:after {content:':';}
input.ng-invalid, select.ng-invalid, textarea.ng-invalid, input.formElement.ng-invalid {
    border: solid 1pt red;
}

JavaScript

var settingsModule = angular.module('interfaceSettings', []);
settingsModule.directive('eiTextField', function() {
    return {
        restrict: 'E',
        compile: function(element, attrs) {
            element.replaceWith('<div><label>' + attrs.label + '</label><input type="text" name="' + attrs.inputName +  '" ng-model="' + attrs.model + '" class="formElement" ng-required="' + attrs.required + '"/> (inputName: ' + attrs.name + ')</div>');
        }
    };
});

function TestDirective($scope) {
    $scope.settings = {
        angularVersion: angular.version,
        serverName: 'vaiism',
        serverType: 'Sun Ultra 40',
        serverUser: 'rweeks'
    };
}