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 –

HTML

<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

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s