Directive input element name ($apply)

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($defer) {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
           model: 'accessor',
           label: 'attribute',
           inputName: 'attribute',
           required: 'evaluate'
        },
        template: '<div><label>{{label}}</label><input type="text" name="{{inputName}}" ng-model="localTextField" class="formElement" ng-required="required"/> (inputName: {{inputName}})</div>',
        link: function(scope, element, attrs) {
            scope.localTextField = scope.model();
            
            $defer(function() {
                $scope.test = 'new value';
            }, 1000);
            
            // Bind to the parent.
            scope.$watch('localTextField', function(value) {
                scope.model(value);
            });
            
            // Bind from the parent.
            scope.$watch(function() {return scope.model()}, function(value) {
                scope.localTextField = value;
            });
        }
    };
});

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