EVOLUTION-MANAGER

Edit File: index-debug.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example1-debug</title>

</head>
<body ng-app="ngAria_ngModelExample">
   <style>
   [role=checkbox] {
     cursor: pointer;
     display: inline-block;
   }
   [role=checkbox] .icon:before {
     content: '\2610';
     display: inline-block;
     font-size: 2em;
     line-height: 1;
     vertical-align: middle;
     speak: none;
   }
   [role=checkbox].active .icon:before {
     content: '\2611';
   }
   pre {
     white-space: pre-wrap;
   }
 </style>
<div>
<form ng-controller="formsController">
 <some-checkbox role="checkbox" ng-model="checked" ng-class="{active: checked}"
   ng-disabled="isDisabled" ng-click="toggleCheckbox()"
   aria-label="Custom Checkbox" show-attrs>
   <span class="icon" aria-hidden="true"></span>
   Custom Checkbox
 </some-checkbox>
</form>
</div>
<script>
 var app = angular.module('ngAria_ngModelExample', ['ngAria'])
 .controller('formsController', function($scope){
   $scope.checked = false;
   $scope.toggleCheckbox = function(){
     $scope.checked = !$scope.checked;
   }
 })
 .directive('someCheckbox', function(){
   return {
     restrict: 'E',
     link: function($scope, $el, $attrs) {
       $el.on('keypress', function(event){
         event.preventDefault();
         if(event.keyCode === 32 || event.keyCode === 13){
           $scope.toggleCheckbox();
           $scope.$apply();
         }
       });
     }
   }
 })
 .directive('showAttrs', function() {
   return function($scope, $el, $attrs) {
     var pre = document.createElement('pre');
     $el.after(pre);
     $scope.$watch(function() {
       var $attrs = {};
       Array.prototype.slice.call($el[0].attributes, 0).forEach(function(item) {
         if (item.name !== 'show-$attrs') {
           $attrs[item.name] = item.value;
         }
       });
       return $attrs;
     }, function(newAttrs, oldAttrs) {
       pre.textContent = JSON.stringify(newAttrs, null, 2);
     }, true);
   }
 });
</script>
</body>
</html>