title: Custom checkbox directive the angularJS way?
body: <p>I'm trying to build a custom checkbox directive (to be able to style it as I like) not using <code>&lt;input type="checkbox"&gt;</code>. It should work as one would expect; updating the model should update the view, clicking the box should update the model, it should listen to the <code>required</code> directive (validation should work).</p>
  
  <p>I currently have the following directive, working exactly as intended:</p>
  
  <pre><code>'use strict';
  
  angular.module('directives.checkbox', [])
    .directive('checkbox', [function () {
      return {
        restrict: 'A',
        require: 'ngModel',
        replace: true,
        template: '&lt;span class="checkbox"&gt;&lt;/span&gt;',
        link: function (scope, elem, attrs, ctrl) {
          elem.bind('click', function () {
            scope.$apply(function () {
              elem.toggleClass('checked');
              ctrl.$setViewValue(elem.hasClass('checked'));
            });
          });
  
          ctrl.$render = function () {
            if (!elem.hasClass('checked') &amp;&amp; ctrl.$viewValue) {
              elem.addClass('checked');
            } else if (elem.hasClass('checked') &amp;&amp; !ctrl.$viewValue) {
              elem.removeClass('checked');
            }
          };
        }
      }
    }]);
  </code></pre>
  
  <p>It's just a <code>&lt;span&gt;</code> with a CSS class <code>checkbox</code> and another CSS class <code>checked</code> for the checked state. However, it does not seem very angular-like (or best practice) to use jQuery to toggle the class and update the view like I do. I would rather use the <code>ng-class</code> and <code>ng-click</code> directives, but that implies I need to use an isolated scope (to avoid scope state clashes when using multiple checkboxes on the same page). For some reason, the isolated scope makes angular stop calling <code>$render()</code> on <code>ctrl</code>.</p>
  
  <p>Does anyone know if this is the correct way, or if there's a more angular-like approach which would still solve the requirements I have?</p>