dynamic:styling
Table of Contents
Description
Works the same as the styling directive but watches for updates. This should only be used if it is required that the styling classes are updated after their initial value to improve performance.
Usage
as attribute
<ANY dynamic-styling="{string}">
...
</ANY>Parameters
| Param | Type | Details |
|---|---|---|
dynamicStyling |
string |
separated string of styles to apply to the element |
Example
Source
<layout:box dynamic-styling="{{styles}}">
<button styling="button" ng-click="toggleStyles()">Toggle box styling</button>
</layout:box>angular.module('lightning')
roller('ExampleController', ['$scope', function($scope) {
$scope.styles = 'bg-raspberry text-raspberry-dark';
$scope.toggleStyles = function () {
if ($scope.styles == 'bg-raspberry text-raspberry-dark') {
$scope.styles = 'bg-sunflower text-sunflower-dark';
} else {
$scope.styles = 'bg-raspberry text-raspberry-dark';
}
};
}]);