Angular element wrapper directive

Question

Here is a code snippet we usually see in twitter boostrap forms:

 <div class="control-group">
    <label class="control-label" for="email">Enter Email</label>
    <div class="controls">
       <input type="email" name="email" ng-model="member.email" required >
    </div>
 </div>

Having lots of fields in form code gets quite noisy so I would like to use something like this in my Angular powered html:

<formy label-for="email" label-text="Enter Email">
      <input type="email" name="email" ng-model="member.email" required >
</formy>

Can this be done by directive in Angular?

Arun P Johny · Accepted Answer · 2013-04-10 13:49:16Z

3

Yes it can be done

app.directive('formy', function() {
  return {
        restrict: 'E',
        transclude: true,
        scope: {
            labelText: "@",
      labelFor: '@'
        },
        template : '<div class="control-group">' +
        '<label for="{{labelFor}}" class="control-label">{{labelText}}</label>' +
        '<div class="controls" ng-transclude></div>' +
        '</div>', 
        replace: true
    };
})

Demo: Plunker

answered Apr 10, 2013 at 13:49

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular element wrapper directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related