Skip to content Skip to sidebar Skip to footer

Angularjs: How To Change The Color Property Via Toggle When Css Class Does Change?

I'm quite new to AngularJS and have already found a lot of helpfull answers on this forum, however the following item is driving me nuts. First of all, let me tell you what I want

Solution 1:

You can, but you don't need to use directives to make this work nice. You could use ng-styleor just $scopelike the following example will show you. This Demo shows you, how easy make a "toggle" work in AngularJS by using directives.

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

OfficeUIRibbon.directive('officeActiveStyle', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
          scope.$watch(function() {
               officeUiRibbonActiveHexColor = '#f700ff';
          });
        }
    };
});

/**
 * CSS Hex color holder
 * @type {string}
 * @global
 */var officeUiRibbonActiveHexColor = '#ff0000';

/**
 * Active holder
 * @type {boolean}
 * @global
 */var officeUiRibbonActiveToggle = false;

// Defines the AngularJS 'OfficeUIRibbon' controller.
OfficeUIRibbon.controller('OfficeUIRibbon', ['$scope', '$http', '$animate', function($scope, $http, $animate) {


    $scope.toggle = function () {
      officeUiRibbonActiveToggle = officeUiRibbonActiveToggle ? false : true; //switch active state
    }

    $scope.getStyles = function () {
      if (officeUiRibbonActiveToggle) {
         return officeUiRibbonActiveHexColor; 
      }
    }
}]);

HTML-Template:

<!DOCTYPE html><htmlng-app="OfficeUIRibbon"><head><scriptsrc="https://code.angularjs.org/1.3.10/angular.js"></script><scriptsrc="script.js"></script></head><bodyng-controller="OfficeUIRibbon"><divoffice-active-style=""style="height: 200px; border: 1px solid black; background-color: {{ getStyles(); }}">Dit is een demo</div><ahref="#"ng-click="toggle()">Toggle</a></body></html>

Solution 2

Optional: This is an other Demo. This demo shows you, how easy make a "toggle" work in angularjs without using directives.

var OfficeUIRibbon = angular.module('OfficeUIRibbon', [])

OfficeUIRibbon.controller('OfficeUIRibbon', ['$scope', '$http', '$animate', function($scope, $http, $animate) {

    /**
     * Active state holder
     * @type {boolean} 
     */var active = false;

    /**
     * Holds css color hex code
     * @type {string}
     */var color = '#ff0000';

    /**
    * Check active scope
    */$scope.toggleShow = function () {
      active = !active; //switch true false in the coolest way ;)
    }

    /** 
    * Check active scope
    */$scope.giveColor = function () {
      if (active) { 
         return color;
      } 
    }
}]); 

Your HTML-Template:

<!DOCTYPE html><htmlng-app="OfficeUIRibbon"><head><scriptsrc="https://code.angularjs.org/1.3.10/angular.js"></script><scriptsrc="script.js"></script></head><bodyng-controller="OfficeUIRibbon"><divoffice-active-style=""style="height: 200px; border: 1px solid black; background-color: {{ giveColor() }}">Dit is een demo</div><ahref="#"ng-click="toggleShow()">Toggle</a></body></html>

Post a Comment for "Angularjs: How To Change The Color Property Via Toggle When Css Class Does Change?"