aboutsummaryrefslogtreecommitdiffstats
path: root/src/ng/directive/ngStyle.js
diff options
context:
space:
mode:
authorMisko Hevery2012-03-23 14:03:24 -0700
committerMisko Hevery2012-03-28 11:16:35 -0700
commit2430f52bb97fa9d682e5f028c977c5bf94c5ec38 (patch)
treee7529b741d70199f36d52090b430510bad07f233 /src/ng/directive/ngStyle.js
parent944098a4e0f753f06b40c73ca3e79991cec6c2e2 (diff)
downloadangular.js-2430f52bb97fa9d682e5f028c977c5bf94c5ec38.tar.bz2
chore(module): move files around in preparation for more modules
Diffstat (limited to 'src/ng/directive/ngStyle.js')
-rw-r--r--src/ng/directive/ngStyle.js42
1 files changed, 42 insertions, 0 deletions
diff --git a/src/ng/directive/ngStyle.js b/src/ng/directive/ngStyle.js
new file mode 100644
index 00000000..8a4e7458
--- /dev/null
+++ b/src/ng/directive/ngStyle.js
@@ -0,0 +1,42 @@
+'use strict';
+
+/**
+ * @ngdoc directive
+ * @name angular.module.ng.$compileProvider.directive.ng-style
+ *
+ * @description
+ * The ng-style allows you to set CSS style on an HTML element conditionally.
+ *
+ * @element ANY
+ * @param {expression} ng-style {@link guide/dev_guide.expressions Expression} which evals to an
+ * object whose keys are CSS style names and values are corresponding values for those CSS
+ * keys.
+ *
+ * @example
+ <doc:example>
+ <doc:source>
+ <input type="button" value="set" ng-click="myStyle={color:'red'}">
+ <input type="button" value="clear" ng-click="myStyle={}">
+ <br/>
+ <span ng-style="myStyle">Sample Text</span>
+ <pre>myStyle={{myStyle}}</pre>
+ </doc:source>
+ <doc:scenario>
+ it('should check ng-style', function() {
+ expect(element('.doc-example-live span').css('color')).toBe('rgb(0, 0, 0)');
+ element('.doc-example-live :button[value=set]').click();
+ expect(element('.doc-example-live span').css('color')).toBe('rgb(255, 0, 0)');
+ element('.doc-example-live :button[value=clear]').click();
+ expect(element('.doc-example-live span').css('color')).toBe('rgb(0, 0, 0)');
+ });
+ </doc:scenario>
+ </doc:example>
+ */
+var ngStyleDirective = ngDirective(function(scope, element, attr) {
+ scope.$watch(attr.ngStyle, function(newStyles, oldStyles) {
+ if (oldStyles && (newStyles !== oldStyles)) {
+ forEach(oldStyles, function(val, style) { element.css(style, '');});
+ }
+ if (newStyles) element.css(newStyles);
+ }, true);
+});