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 wrap the input in the compile function? The advantage is that you will not have to copy attributes and will not have to cleanup in the scope destroy function. Notice that you have to remove the directive attribute though to prevent circular execution.

(http://jsfiddle.net/oscott9/8er3fu0r/)

angular.module('directives').directive('wrappedWithDiv', [
    function() {
        var definition = {
            restrict: 'A',
            compile: function(element, attrs) {
                element.removeAttr("wrapped-with-div");
                element.replaceWith("
" +
                    element[0].outerHTML + "
")
            }
        }
        return definition;
    }
]);