2 * Angular Material Design
3 * https://github.com/angular/material
7 goog.provide('ng.material.components.checkbox');
8 goog.require('ng.material.core');
11 * @name material.components.checkbox
12 * @description Checkbox module!
15 .module('material.components.checkbox', ['material.core'])
16 .directive('mdCheckbox', MdCheckboxDirective);
21 * @module material.components.checkbox
25 * The checkbox directive is used like the normal [angular checkbox](https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D).
27 * As per the [material design spec](http://www.google.com/design/spec/style/color.html#color-ui-color-application)
28 * the checkbox is in the accent color by default. The primary color palette may be used with
29 * the `md-primary` class.
31 * @param {string} ng-model Assignable angular expression to data-bind to.
32 * @param {string=} name Property name of the form under which the control is published.
33 * @param {expression=} ng-true-value The value to which the expression should be set when selected.
34 * @param {expression=} ng-false-value The value to which the expression should be set when not selected.
35 * @param {string=} ng-change Angular expression to be executed when input changes due to user interaction with the input element.
36 * @param {boolean=} md-no-ink Use of attribute indicates use of ripple ink effects
37 * @param {string=} aria-label Adds label to checkbox for accessibility.
38 * Defaults to checkbox's text. If no default text is found, a warning will be logged.
42 * <md-checkbox ng-model="isChecked" aria-label="Finished?">
46 * <md-checkbox md-no-ink ng-model="hasInk" aria-label="No Ink Effects">
50 * <md-checkbox ng-disabled="true" ng-model="isDisabled" aria-label="Disabled">
57 function MdCheckboxDirective(inputDirective, $mdInkRipple, $mdAria, $mdConstant, $mdTheming, $mdUtil, $timeout) {
58 inputDirective = inputDirective[0];
59 var CHECKED_CSS = 'md-checked';
65 priority:210, // Run before ngAria
67 '<div class="md-container" md-ink-ripple md-ink-ripple-checkbox>' +
68 '<div class="md-icon"></div>' +
70 '<div ng-transclude class="md-label"></div>',
74 // **********************************************************
76 // **********************************************************
78 function compile (tElement, tAttrs) {
80 tAttrs.type = 'checkbox';
81 tAttrs.tabindex = tAttrs.tabindex || '0';
82 tElement.attr('role', tAttrs.type);
84 return function postLink(scope, element, attr, ngModelCtrl) {
85 ngModelCtrl = ngModelCtrl || $mdUtil.fakeNgModel();
90 scope.$eval.bind(scope, attr.ngChecked),
91 ngModelCtrl.$setViewValue.bind(ngModelCtrl)
94 $$watchExpr('ngDisabled', 'tabindex', {
98 $mdAria.expectWithText(element, 'aria-label');
100 // Reuse the original input[type=checkbox] directive from Angular core.
101 // This is a bit hacky as we need our own event listener and own render
103 inputDirective.link.pre(scope, {
106 }, attr, [ngModelCtrl]);
108 scope.mouseActive = false;
109 element.on('click', listener)
110 .on('keypress', keypressHandler)
111 .on('mousedown', function() {
112 scope.mouseActive = true;
114 scope.mouseActive = false;
117 .on('focus', function() {
118 if(scope.mouseActive === false) { element.addClass('md-focused'); }
120 .on('blur', function() { element.removeClass('md-focused'); });
122 ngModelCtrl.$render = render;
124 function $$watchExpr(expr, htmlAttr, valueOpts) {
126 scope.$watch(attr[expr], function(val) {
127 if (valueOpts[val]) {
128 element.attr(htmlAttr, valueOpts[val]);
134 function keypressHandler(ev) {
135 var keyCode = ev.which || ev.keyCode;
136 if (keyCode === $mdConstant.KEY_CODE.SPACE || keyCode === $mdConstant.KEY_CODE.ENTER) {
138 if (!element.hasClass('md-focused')) { element.addClass('md-focused'); }
142 function listener(ev) {
143 if (element[0].hasAttribute('disabled')) return;
145 scope.$apply(function() {
146 // Toggle the checkbox value...
147 var viewValue = attr.ngChecked ? attr.checked : !ngModelCtrl.$viewValue;
149 ngModelCtrl.$setViewValue( viewValue, ev && ev.type);
150 ngModelCtrl.$render();
155 if(ngModelCtrl.$viewValue) {
156 element.addClass(CHECKED_CSS);
158 element.removeClass(CHECKED_CSS);
164 MdCheckboxDirective.$inject = ["inputDirective", "$mdInkRipple", "$mdAria", "$mdConstant", "$mdTheming", "$mdUtil", "$timeout"];
166 ng.material.components.checkbox = angular.module("material.components.checkbox");