required field Label–Angularjs Directive

So I thought to make some kind of custom <label> where I have mark showing that this field is required along with label text….

In angular, we can take advantage of making directives for this kind of custom control, so I did something like below –


<required-label label=”First Name”></required-label>

app.JS  (Angular Directive)

appRoot.directive(‘requiredLabel’, function () {
    return {
        restrict: ‘E’,
        replace: false,
        scope: {
            name: ‘@’
        template: “<label popover=’Required Input’ popover-trigger=’mouseenter’ >{{Text}}&nbsp;<i class=’icon ion-ios7-star red’></i>&nbsp;”,
        link: function (scope, element, attrs) {
            scope.Text = attrs[‘label’];

Happy CodingSmile


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s