diff options
| author | Misko Hevery | 2012-03-23 14:03:24 -0700 | 
|---|---|---|
| committer | Misko Hevery | 2012-03-28 11:16:35 -0700 | 
| commit | 2430f52bb97fa9d682e5f028c977c5bf94c5ec38 (patch) | |
| tree | e7529b741d70199f36d52090b430510bad07f233 /src/ng/directive/ngStyle.js | |
| parent | 944098a4e0f753f06b40c73ca3e79991cec6c2e2 (diff) | |
| download | angular.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.js | 42 | 
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); +});  | 
