dynamic:styling

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';
                }

            };

        }]);

Result