Customizing the template within a Directive

Question

I have a form that is using markup from Bootstrap, like the following:

  

    
Legend tex         


        

Answer 1

angular.module('formComponents', [])
  .directive('formInput', function() {
    return {
        restrict: 'E',
        compile: function(element, attrs) {
            var type = attrs.type || 'text';
            var required = attrs.hasOwnProperty('required') ? "required='required'" : "";
            var htmlText = '
' +
                '' + attrs.label + '' +
                    '
' +
                    '' +
                    '
' +
                '
';
            element.replaceWith(htmlText);
        }
    };
})