Angular: Empty Fiddle

http://angularjs.org/

by gion_13

HTML

<script src="https://code.angularjs.org/1.2.9/angular.js"></script>
<form name="form">
    <br>title:<br>
    <input type="text" name="title" ng-model="title"/>
    <input type="text" name="metatitle" ng-model="metatitle" group-check="title" group-check-function="toUpperCase" placeholder="uppercase"/>
    <input type="text" name="headertitle" ng-model="headertitle" group-check="title" group-check-function="toLowerCase" placeholder="lowercase"/>
    <input type="text" name="path" ng-model="path" group-check="title" placeholder="title copy" />
    
    <br>subtitle:<br>
    <input type="text" name="promotext" ng-model="promotext" group-check="subtext" />
    <input type="text" name="subtext" ng-model="subtext" />
</form>

JavaScript

angular.module('Module', [])
    .run(function($rootScope) {
        $rootScope.toUpperCase = function(val) {
            return val ? val.toUpperCase() : val;
        };
        
        $rootScope.toLowerCase = function(val) {
            return val ? val.toLowerCase() : val;
        };
    })
    .directive('groupCheck', function () {
		var link = function link(scope, element, attrs, ctrl) {
			// watch for any changes in the model that we check on
			scope.$watch('groupCheck', function(newVal, oldVal) {
                // if the user hasn't touched the input
				if(ctrl[scope.name] && ctrl[scope.name].$pristine) {
                    // if we do provide a function
					if(scope.groupCheckFunction) {
						scope.model = scope.groupCheckFunction(newVal);	
                    } else {
                        scope.model = newVal;
                    }
				}
			});
       };
        return {
        	restrict: 'A',
            require: '^form',
        	scope: {
        		groupCheck: '=',
        		model: '=ngModel',
        		groupCheckFunction: '=',
                name: '@'
        	},
        	link: link
        };
        
    });