Multiple Directive Styles

by rgthree

HTML

<div ng-app="app">
    <h3 app-font-size="12px" ng-style="appFontSize.getStyles()">Just Font Size (12)</h3>
    <h3 app-text-color="#FC0" ng-style="appTextColor.getStyles()">Just Text Color (#FC0)</h3>
    <h3 app-background="#CCC" ng-style="appBackgroundCtrl.getStyles()">Just Background (#CCC)</h3>
</div>

JavaScript

var app = angular.module('app', []);

app.directive('appFontSize', function ($scope) {
});

var AppFontSize = function($attrs) {
  this.fontSize = $attrs['app-font-size'];
  console.log(this.fontSize);
};
AppFontSize.prototype.getStyles = function() {
    return {fontSize: this.fontSize};
};
app.directive('appFontSize', function() {
  return {
    restrict: 'A',
    bindToController: true,
    controller: AppFontSize,
    controllerAs: 'appFontSize'
  };
});


var AppTextColor = function($attrs) {
  this.color = $attrs['app-text-color'];
  console.log(this.color);
};
AppTextColor.prototype.getStyles = function() {
  console.log('AppTextColor.getStyles', this.color);
    return {"color": this.color};
};
app.directive('appTextColor', function() {
  return {
    restrict: 'A',
    bindToController: true,
    controller: AppTextColor,
    controllerAs: 'appTextColor'
  };
});


var AppBackgroundCtrl = function($attrs) {
  this.background = $attrs['app-background'];
};
AppBackgroundCtrl.prototype.getStyles = function() {
    return {background: this.background};
};
app.directive('appBackground', function() {
  return {
    restrict: 'A',
    bindToController: true,
    controller: AppBackgroundCtrl,
    controllerAs: 'appBackgroundCtrl'
  };
});