mirror of
https://github.com/zhigang1992/angular.js.git
synced 2026-04-17 12:15:56 +08:00
docs(ngStyle): clarify using styles that are not valid property names
Closes #6838
This commit is contained in:
committed by
Peter Bacon Darwin
parent
f4bb006e45
commit
edab80cddb
@@ -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)');
|
||||
|
||||
Reference in New Issue
Block a user