From 2430f52bb97fa9d682e5f028c977c5bf94c5ec38 Mon Sep 17 00:00:00 2001 From: Misko Hevery Date: Fri, 23 Mar 2012 14:03:24 -0700 Subject: chore(module): move files around in preparation for more modules --- src/ng/directive/ngClass.js | 143 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 143 insertions(+) create mode 100644 src/ng/directive/ngClass.js (limited to 'src/ng/directive/ngClass.js') diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js new file mode 100644 index 00000000..21b75dd0 --- /dev/null +++ b/src/ng/directive/ngClass.js @@ -0,0 +1,143 @@ +'use strict'; + +function classDirective(name, selector) { + name = 'ngClass' + name; + return ngDirective(function(scope, element, attr) { + scope.$watch(attr[name], function(newVal, oldVal) { + if (selector === true || scope.$index % 2 === selector) { + if (oldVal && (newVal !== oldVal)) { + if (isObject(oldVal) && !isArray(oldVal)) + oldVal = map(oldVal, function(v, k) { if (v) return k }); + element.removeClass(isArray(oldVal) ? oldVal.join(' ') : oldVal); + } + if (isObject(newVal) && !isArray(newVal)) + newVal = map(newVal, function(v, k) { if (v) return k }); + if (newVal) element.addClass(isArray(newVal) ? newVal.join(' ') : newVal); } + }, true); + }); +} + +/** + * @ngdoc directive + * @name angular.module.ng.$compileProvider.directive.ng-class + * + * @description + * The `ng-class` allows you to set CSS class on HTML element dynamically by databinding an + * expression that represents all classes to be added. + * + * The directive won't add duplicate classes if a particular class was already set. + * + * When the expression changes, the previously added classes are removed and only then the classes + * new classes are added. + * + * @element ANY + * @param {expression} ng-class {@link guide/dev_guide.expressions Expression} to eval. The result + * of the evaluation can be a string representing space delimited class + * names, an array, or a map of class names to boolean values. + * + * @example + + + + +
+ Sample Text      +
+ + it('should check ng-class', function() { + expect(element('.doc-example-live span').prop('className')).not(). + toMatch(/ng-invalid/); + + using('.doc-example-live').element(':button:first').click(); + + expect(element('.doc-example-live span').prop('className')). + toMatch(/ng-invalid/); + + using('.doc-example-live').element(':button:last').click(); + + expect(element('.doc-example-live span').prop('className')).not(). + toMatch(/ng-invalid/); + }); + +
+ */ +var ngClassDirective = classDirective('', true); + +/** + * @ngdoc directive + * @name angular.module.ng.$compileProvider.directive.ng-class-odd + * + * @description + * The `ng-class-odd` and `ng-class-even` works exactly as + * {@link angular.module.ng.$compileProvider.directive.ng-class ng-class}, except it works in conjunction with `ng-repeat` and + * takes affect only on odd (even) rows. + * + * This directive can be applied only within a scope of an + * {@link angular.module.ng.$compileProvider.directive.ng-repeat ng-repeat}. + * + * @element ANY + * @param {expression} ng-class-odd {@link guide/dev_guide.expressions Expression} to eval. The result + * of the evaluation can be a string representing space delimited class names or an array. + * + * @example + + +
    +
  1. + + {{name}}       + +
  2. +
+
+ + it('should check ng-class-odd and ng-class-even', function() { + expect(element('.doc-example-live li:first span').prop('className')). + toMatch(/ng-format-negative/); + expect(element('.doc-example-live li:last span').prop('className')). + toMatch(/ng-invalid/); + }); + +
+ */ +var ngClassOddDirective = classDirective('Odd', 0); + +/** + * @ngdoc directive + * @name angular.module.ng.$compileProvider.directive.ng-class-even + * + * @description + * The `ng-class-odd` and `ng-class-even` works exactly as + * {@link angular.module.ng.$compileProvider.directive.ng-class ng-class}, except it works in + * conjunction with `ng-repeat` and takes affect only on odd (even) rows. + * + * This directive can be applied only within a scope of an + * {@link angular.module.ng.$compileProvider.directive.ng-repeat ng-repeat}. + * + * @element ANY + * @param {expression} ng-class-even {@link guide/dev_guide.expressions Expression} to eval. The + * result of the evaluation can be a string representing space delimited class names or an array. + * + * @example + + +
    +
  1. + + {{name}}       + +
  2. +
+
+ + it('should check ng-class-odd and ng-class-even', function() { + expect(element('.doc-example-live li:first span').prop('className')). + toMatch(/odd/); + expect(element('.doc-example-live li:last span').prop('className')). + toMatch(/even/); + }); + +
+ */ +var ngClassEvenDirective = classDirective('Even', 1); -- cgit v1.2.3