angular directive to style a checkbox

Question

I am trying to style a checkbox with an angular directive and I came up with a simple solution. My idea is to have in HTML an input like this

<input type="checkbox" class="checkbox" ng-model="abc1"/>

and I want to create a directive that practically wraps this input inside a label with the class check and adds a div after the input so I can target that div after the input with + from CSS and design on it the states of the input.

So my directive should transform my HTML from what I should previous into this

<label class="check">
    <input type="checkbox" class="checkbox" ng-model="abc1"/>
    <div></div>
</label>

now I created this directive

.directive('checkbox', function() {
    return {
        restrict: 'C',
        transclude: true,
        template: '<label><ng-transclude></ng-transclude><div></div></label>',
        link: function(scope, elem, attrs) {
        }
    };
})

but it doesn't do the layout I want to achieve, I hope someone can help me showing the way to write the directive in order to transform it into that HTML output.

I have played a bit with it, manage to get the labe content surrounding, added replace:true, tell me if this can be an starting point plnkr.co/edit/ZhecuDp0NoCLbfxm02Xt?p=preview — Braulio
– Braulio, Commented Jul 1, 2014 at 9:33

Michael Kang · Accepted Answer · 2014-07-01 09:23:17Z

2

The following directive will wrap the input element to achieve the HTML structure that you want. If the wrapper div is strictly structural and does not contain any directives, then I think it is OK to do this.

  app.directive('checkbox', function() {
      return {
          restrict: 'C',
          link: function (scope, elem, attrs) {
              elem.wrap('<div class="check"></div>');
              elem.after('<div></div>');
          }
      };
  });

Here is a Plunk

edited Jul 1, 2014 at 9:23

answered Jul 1, 2014 at 8:29

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

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

2 Comments

Pacuraru Daniel Over a year ago

i used this and i get this into the html

Pacuraru Daniel Over a year ago

thank you for this answer, i have used this, the only change is i moved the stuff from the link into the compile function

Collectives™ on Stack Overflow

angular directive to style a checkbox

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related