Using AngularJS directives with the style guide

example-1.html

<div class="sg-input" ng-class="{'sg-input--selected': hasFocus, 'sg-input--invalid': !value && changed, 'sg-input--valid': !!value}">
    <label class="sg-input__label">Name</label>
    <input class="sg-input__element" name="name" ng-model="value" ng-focus="hasFocus=true" ng-blur="hasFocus=false" ng-change="changed=true" required>
    <div class="sg-input__description">User name</div>
</div>

example-2-usage.html

<sg-input label="Name" value="formField.name" description="User name"></sg-input>

example-2.html

<script>
    angular.module('myApp', [])
        .directive('sgInput', function () {
            return {
                restrict: 'E',
                replace: true,
                templateUrl: 'sg-input.html',
                scope: {
                    'value': '=',
                    'label': '@',
                    'description': '@'
                }
            };
        });
</script>

<script type="text/ng-template" id="sg-input.html">
    <div class="sg-input"
         ng-class="{'sg-input--selected': hasFocus, 'sg-input--invalid': !value && changed, 'sg-input--valid': !!value}">
        <label class="sg-input__label">{{label}}</label>
        <input class="sg-input__element" name="{{label}}" ng-model="value" ng-focus="hasFocus=true"
               ng-blur="hasFocus=false" ng-change="changed=true">

        <div class="sg-input__description">{{description}}</div>
    </div>
</script>

example-3.html

<script>
    angular.module('myApp', [])
        .directive('sgInput', function () {
            return {
                restrict: 'E',
                replace: true,
                templateUrl: 'sg-input.html',
                scope: {
                    'value': '=ngModel',
                    'label': '@',
                    'description': '@'
                }
            };
        });
</script>

example-4.html

<script>
    angular.module('myApp', [])
        .directive('sgInput', function () {
            return {
                restrict: 'E',
                replace: true,
                templateUrl: 'sg-input.html',
                scope: {
                    'label': '@',
                    'description': '@'
                },
                require: 'ngModel',
                link: function (scope, element, attrs, ngModelCtrl) {
                    // Set ngModel view value on input value change
                    scope.$watch('value', function (value) {
                        ngModelCtrl.$setViewValue(value);
                    });

                    // On ngModel value change update input value. This is needed to get changes from outside
                    scope.$watch(function () {
                        return ngModelCtrl.$modelValue;
                    }, function (value) {
                        if(value)
                            scope.value = value;
                    });

                    // Update invalid flag
                    scope.$watch(function () {
                        return ngModelCtrl.$invalid && ngModelCtrl.$dirty;
                    }, function (isInvalid) {
                        scope.invalid = isInvalid;
                    });

                    // Update valid flag
                    scope.$watch(function () {
                        return ngModelCtrl.$valid;
                    }, function (isValid) {
                        scope.valid = isValid;
                    });
                }
            };
        });
</script>

<script type="text/ng-template" id="sg-input.html">
    <div class="sg-input" ng-class="{'sg-input--selected': hasFocus, 'sg-input--invalid': invalid, 'sg-input--valid': valid}">
        <label class="sg-input__label">{{label}}</label>
        <input class="sg-input__element" name="{{label}}" ng-model="value" ng-focus="hasFocus=true" ng-blur="hasFocus=false">
        <div class="sg-input__description">{{description}}</div>
    </div>
</script>

the-alternative-approach.html

<script>
    angular.module('myApp', [])
        .directive('sgInput', function () {
            return {
                restrict: 'C',
                controller: function($element) {
                    this.setValid = function(isValid) {
                        console.log('setValid', isValid);
                        $element.toggleClass('sg-input--valid', isValid);
                    };
                    this.setInvalid = function(isInvalid) {
                        console.log('setInvalid', isInvalid);
                        $element.toggleClass('sg-input--invalid', isInvalid);
                    };
                    this.setSelected = function(isSelected) {
                        $element.toggleClass('sg-input--selected', isSelected);
                    };
                }
            };
        })
        .directive('sgInputElement', function () {
            return {
                restrict: 'C',
                require: ['?^sgInput', '?ngModel'],
                link: function(scope, element, attrs, controllers) {
                    var sgInputCtrl = controllers[0];
                    var ngModelCtrl = controllers[1];

                    // If no parent controller, there isn't anything to do
                    if(!sgInputCtrl) {
                        return;
                    }


                    element.on('focus', function() {
                        sgInputCtrl.setSelected(true);
                    });

                    element.on('blur', function() {
                        sgInputCtrl.setSelected(false);
                    });

                    if(ngModelCtrl) {
                        scope.$watch(function() {
                            return ngModelCtrl.$valid;
                        }, function(isValid) {
                            sgInputCtrl.setValid(isValid);
                        });

                        scope.$watch(function() {
                            return ngModelCtrl.$invalid & ngModelCtrl.$dirty;
                        }, function(isInvalid) {
                            sgInputCtrl.setInvalid(isInvalid);
                        });
                    }
                }
            };
        });
</script>

<div class="sg-input">
    <label class="sg-input__label">Email</label>
    <input class="sg-input__element" name="email" ng-model="formField.email" type="email" required>
    <div class="sg-input__description">User's email address</div>
</div>

with-ng-messages.html

<div class="sg-input">
    <label class="sg-input__label">Email</label>
    <input class="sg-input__element" name="email" ng-model="formField.email" type="email" required>

    <div class="sg-input__description" ng-show="myForm.email.$valid">
        User's email address
    </div>
    <div class="sg-input__description" ng-messages="myForm.email.$error">
        <div ng-message="email">Not a valid email address</div>
        <div ng-message="required">User email is required</div>
    </div>
</div>