wrapping inputs in directives in angular

Question

I had the idea to wrap inputs into custom directives to guarantee a consistent look and behavior through out my site. I also want to wrap bootstrap ui\'s datepicker and dropdown

Answer 1

Why not doing a directive like that?

myApp.directive('wrapForm', function(){
    return {
        restrict: 'AC',
        link: function(scope, inputElement, attributes){                       
            var overallWrap = angular.element('
');
            var validation = angular.element('
').appendTo(overallWrap);
            var button = angular.element('
').appendTo(overallWrap);
            var inputWrap = angular.element('
').appendTo(overallWrap);

            overallWrap.insertBefore(inputElement);
            inputElement.appendTo(inputWrap);

            inputElement.on('keyup', function(){
                if (inputElement.val()) {
                    validation.text('Just empty fields are valid!');
                } else {
                    validation.text('');
                }
            });            
        }
    }
});

Fiddle: http://jsfiddle.net/bZ6WL/

Basically you take the original input field (which is, by the way, also an angularjs directive) and build the wrappings seperately. In this example I simply build the DIVs manually. For more complex stuff, you could also use a template which get $compile(d) by angularjs.

The advantage using this class or html attribute "wrapForm": You may use the same directive for several form input types.