AngularJS Live Example

by Jonathan Smith

HTML

<div ng-app="App">
 <div ng-controller="ParentCtrl">
     <input type="checkbox" ng-model="foo">
     <mobilecheckbox ng-model="foo" title="title"></mobilecheckbox>    
 </div>
</div>

CSS

</style>
<script src="http://code.angularjs.org/1.0.0rc9/angular-1.0.0rc9.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.css"/>
<style>

JavaScript

var App = angular.module('App',[])
.directive('mobilecheckbox', function() {
    return {
        restrict: 'E',
        replace: true,
        require: 'ngModel',
        template:
           '<div class="ui-checkbox">'+
            '<label class="ui-btn ui-btn-corner-all ui-btn-icon-left ui-checkbox-off ui-btn-up-c">'+
              '<span class="ui-btn-inner ui-btn-corner-all">'+
                '<span class="ui-btn-text">{{title()}}</span>'+
                '<span class="ui-icon ui-icon-shadow"> </span>'+
              '</span>'+
            '</label>'+
           '</div>',
  
        link: function(scope, element, attrs, ngModel) {
            var checkboxSpan = element.find('span').eq(2);
            ngModel.$render = function() {
                if (ngModel.$viewValue) {
                    checkboxSpan.removeClass('ui-icon-checkbox-off');
                    checkboxSpan.addClass('ui-icon-checkbox-on');
                } else {
                    checkboxSpan.removeClass('ui-icon-checkbox-on');
                    checkboxSpan.addClass('ui-icon-checkbox-off');
                }
            }
            element.bind('click', function() {
                scope.$apply(function(){
                    ngModel.$setViewValue(!ngModel.$viewValue);
                    ngModel.$render();
                });
            });
        },
        scope: { title: 'accessor' }
    }
});


function ParentCtrl($scope){
    $scope.foo= false;
    $scope.title = "Checkbox title";
}