docs(ngStyle): clarify using styles that are not valid property names

Closes #6838
This commit is contained in:
ABitTooCalm
2014-05-21 19:44:35 +01:00
committed by Peter Bacon Darwin
parent f4bb006e45
commit edab80cddb

View File

@@ -9,14 +9,20 @@
* The `ngStyle` directive allows you to set CSS style on an HTML element conditionally.
*
* @element ANY
* @param {expression} ngStyle {@link guide/expression Expression} which evals to an
* object whose keys are CSS style names and values are corresponding values for those CSS
* keys.
* @param {expression} ngStyle
*
* {@link guide/expression Expression} which evals to an
* object whose keys are CSS style names and values are corresponding values for those CSS
* keys.
*
* Since some CSS style names are not valid keys for an object, they must be quoted.
* See the 'background-color' style in the example below.
*
* @example
<example>
<file name="index.html">
<input type="button" value="set" ng-click="myStyle={color:'red'}">
<input type="button" value="set color" ng-click="myStyle={color:'red'}">
<input type="button" value="set background" ng-click="myStyle={'background-color':'blue'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>
@@ -30,9 +36,9 @@
<file name="protractor.js" type="protractor">
var colorSpan = element(by.css('span'));
it('should check ng-style', function() {
iit('should check ng-style', function() {
expect(colorSpan.getCssValue('color')).toBe('rgba(0, 0, 0, 1)');
element(by.css('input[value=set]')).click();
element(by.css('input[value=\'set color\']')).click();
expect(colorSpan.getCssValue('color')).toBe('rgba(255, 0, 0, 1)');
element(by.css('input[value=clear]')).click();
expect(colorSpan.getCssValue('color')).toBe('rgba(0, 0, 0, 1)');