mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-18 15:50:22 +00:00
42 lines
1.5 KiB
JavaScript
42 lines
1.5 KiB
JavaScript
'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);
|
|
});
|