Angular pseudo-check directive

Angular-pseudo-check-directive.markdown

Angular pseudo-check directive

A Pen by Marcos Sandrini on CodePen.

License.

index.html

<div ng-app="demo">
  <div ng-controller="demoCtrl">
    <a pseudo-check data-model="myVar">Check</a>
  </div>
</div>

script.js

var a = angular.module('demo',[]);

a.controller('demoCtrl', function($scope){ });

a.directive('pseudoCheck',function(){
	return {
		restrict: 'A',
		scope: {model:'='},
		template: '<a class="pseudocheck" href="javascript:;" ng-class="{active:model}" ng-click="Toggle()">'+
	 '<span ng-transclude></span></a>',
		replace: true,
		transclude: true,
		link: function($scope, $element){
			$scope.Toggle = function(){
				$scope.model = !$scope.model;
			}
		}
	}
});

style.css

.pseudocheck{
  padding:5px; 
  background:#ccc;
  cursor:pointer;
  text-decoration:none;
  color:#555;
}
.pseudocheck:before{
  content:'✘';
  display:inline-block;
  width:18px;
  color:#999;
}
.pseudocheck.active:before{
  content:'✔';
  color:#F70;
}