Directive for validation messages

Setting the validation message block up as directives.

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc6.min.js"></script>
<p>Directive For Validation Messages</p>
<hr/>
<div ng-app="interfaceSettings" ng-controller="TestDirective">
    <ul style="font-size:0.9em;">
        <li><b>AngularVersion:</b> {{settings.angularVersion.full}}</li>
        <li><b>ServerType:</b> {{settings.serverType}}</li>
        <li><b>ServerName:</b> {{settings.serverName}}</li>
        <li><b>ServerIP:</b> {{settings.serverIPAddress}}</li>
    </ul>
    <hr/>
    <p><b>Block Created Manually</b></p>
    <div id="validationError" style="display:none;" class="alert_box error" ng-show="settingsForm.$invalid">
        <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>
            <li ng-show="settingsForm.serverType.$error.pattern"><b>Wrong Format: </b> ServerType</li>
            <li ng-show="settingsForm.serverIPAddress.$error.pattern"><b>Wrong Format: </b> IP Address</li>
        </ul>
    </div>
    
    <hr/>
    <b>Block created With Directive</b>
    <ei-validation-messages form="settingsForm">
        <ei-validation-message field-name="serverName">${extInt.label.serverName}</ei-validation-message>
        <ei-validation-message field-name="serverType">${extInt.label.serverType}</ei-validation-message>
        <ei-validation-message field-name="serverIPAddress" type="pattern">${extInt.label.serverIPAddress}</ei-validation-message>
    </ei-validation-messages>
    <hr/>

    <form name="settingsForm">
        <ei-text-field model="settings.serverName" label="Server Name" field-name="serverName" required="true"></ei-text-field>

        <ei-text-field model="settings.serverIPAddress" label="Server IP" field-name="serverIPAddress" pattern="ipv4">(Pattern matters)</ei-text-field>
        
        <ei-text-field model="settings.serverType" label="Server Type" field-name="serverType"...

CSS

body {
    padding: 10px; 
    font-family: sans-serif; 
    font-size: 0.8em;
}
form label {font-weight:bold;margin-right:10px;font-size:0.9em;}
form label:after {content:':';}

// Layout
form .row {width: 90%; display: inline-block;}
form .row:after { content: '.';display: block;clear: both;visibility: hidden;line-height: 0;height: 10px;}


.column {float: left;}
.columnOne {width:25%;}
.columnTwo {width:70%;}


#validationError {
    padding: 0.77em;
}
#validationError:before {
    content: 'The information provided is either invalid or incomplete.';
}
#validationError ul { margin-top: 15px; }
input.ng-invalid, select.ng-invalid, textarea.ng-invalid, input.formElement.ng-invalid {
    border: solid 1pt red;
}
.alert_box.error, #errorExplanation {
    background-color: #FFEFF0;
    border: solid 1pt #DE5462;
}
li {content: '*   ';}

JavaScript

var settingsModule = angular.module('interfaceSettings', []);
/*
 * Order:
 *     > config()
 *       > run()
 *         > controller()
 */
settingsModule.config(function() {});
settingsModule.run(function() {});

// The validations message block.
settingsModule.directive('eiValidationMessages', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
            form: 'accessor'
        },
        // This templateUrl for some reason wouldn't work as inline 'validationErrorMessages' above
        // says 'has no method 'replace'.
        // templateUrl: 'validationErrorMessages',
  
        template:
'<div id="validationError" style="display:none;" class="alert_box error" ng-show="localForm.$invalid">' +
'    <ul class="ng-transclude"></ul>' +
'</div>',
        link: function(scope, element, attrs, controller) {
            scope.myVar = 'Holy Batarang!';
            // Setup the binding to know when form status changes.
            scope.$watch(function() {return scope.form()}, function(value) {
                scope.localForm = value;
            });
        }
    };
});

// The validation message definition.
settingsModule.directive('eiValidationMessage', function() {
    return {
        restrict: 'EA',
        //transclude: true,
        compile: function(element, attrs) {
            var typeOfMessage = attrs.type || 'required';
            var errorType = 'required';
            var errorPre = '<b>Required: </b>';
            var fieldName = attrs.fieldName;
            var replacementBlock = '';
            if (typeOfMessage === 'pattern') {
                errorType = 'pattern';
                errorPre = '<b>Wrong Format: </b>';
            }
            
            // Shouldn't 'localForm' be available since was 
            // defined in parent and there is no isolated scope here?
            var patternBlock = '<li ng-show="localForm.' + fieldName + '.$error.'+ errorType + '">' + errorPre +...