Customizing the template within a Directive

Question

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

  

    
Legend tex         


        

Answer 1

Here's what I ended up using.

I'm very new to AngularJS, so would love to see better / alternative solutions.

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

Example usage: