How to update variables with input values in .less file dynamically using AngularJS

Question

I realize a form of this question has been asked before (see 28208451), however, I need to get the input value and then set it as the new value so that other input fields can access it. Here is a link to my plunk.

I can enter a new hue but it is not saved when I attempt to change the saturation or lightness. I am sure it is an easy fix (possibly a directive) but for the life of me I cannot wrap my head around it. I am still fairly new at AngularJS ... any help would be appreciated.

**controller:** 
angular.module('colorChanger', [])
    .controller('ColorController', [

      function() {
        var vm = this;

        vm.hue = '194.3';
        vm.saturation = '100';
        vm.lightness = '50';
        vm.newHue = function() {
          if (vm.hue) {
            less.modifyVars({
              hue: vm.hue
            });
          }
        };
        vm.newSaturation = function() {
          if (vm.saturation) {
            less.modifyVars({
              saturation: vm.saturation
            });
          }
        };
        vm.newLightness = function() {
          if (vm.lightness) {
            less.modifyVars({
              lightness: vm.lightness
            });
          }
        };
      }

    ]);

**index:**
<ul>
  <li class="bgc-color-base"></li>
</ul>

<form data-ng-submit="color.newHue()" data-ng-controller="ColorController as color">
  <label for="hue">Hue:</label>
  <input type="text" id="hue" data-ng-model="color.hue" />
  <input type="submit" value="Submit" />
</form>
<form data-ng-submit="color.newSaturation()" data-ng-controller="ColorController as color">
  <label for="saturation">Saturation:</label>
  <input type="text" id="saturation" data-ng-model="color.saturation" />
  <input type="submit" value="Submit" />
</form>
<form data-ng-submit="color.newLightness()" data-ng-controller="ColorController as color">
  <label for="lightness">Lightness:</label>
  <input type="text" id="lightness" data-ng-model="color.lightness" />
  <input type="submit" value="Submit" />
</form>

**less:**
ul {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
  li {
    height: 100px;
    &.bgc-color-base {
    .background-base;
    }
  }
}    

//== color variables
@hue: 194.3; // enter optional hue variable or custom hue range 0-330
@saturation: 100; // saturation range 0-100
@lightness: 50; // lightness range 0-100 (0 = black, 100 = white)
@alpha: 1;

//== base color function
@color-base: hsla(@hue, (@saturation/100), (@lightness/100), @alpha);

//== base color mixins
.background-base(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
 background: @color-base;
}

I'm not sure what the use case is here, but bear in mind that, according to the less docs '[We recommend using less in the browser only for development](http://lesscss.org/usage/#using-less-in-the-browser)' - if the goal is to have a dynamically up-datable background you can use an ng-style directive to set an inline style on the element. I've [updated your plunkr](http://embed.plnkr.co/Stm0FZ/preview). Personally I think in-browser modifications should be handled with classes or possibly inline styles, rather than involving less. — Matthew de Nobrega, May 29 '15 at 05:56
I agree with you and normally I would not attempt it but I wanted to create a live demo in an application I am building to demonstrate the behind the scenes generation of a color scheme using less. Here is a [pen](http://codepen.io/MAustinMMDP/pen/MwaEyB) that shows the less code. I realize this has already been done with codepen but I thought it would be fun to create an application with user interaction that does not require manually changing the hue, saturation and lightness variables. — MelissaMMDP, May 29 '15 at 13:40
Actually, either way would require editing the variables but allowing the user interaction in the window would be more dynamic then having to edit the less code manually. Regardless, I now believe just embedding the pen is a better way to go. I think I just got so caught up in making it work I lost sight of whether or not it should ;). Thanks for all your help! — MelissaMMDP, May 29 '15 at 13:59

Pankaj Parkar · Accepted Answer · 2015-05-29T13:55:30.117

You should have common controller for all three inputs otherwise the scope value change in one controller will not be available for the other controller

OR

If you want stay with separate controller then you need to create service that will have value of all variable is stored in it. That will share those values across.

Create a single method for updates less variable that will do the trick for you.

Markup

<body data-ng-app="colorChanger" data-ng-controller="ColorController as color">
  <ul>
    <li class="bgc-color-base"></li>
  </ul>

  <form data-ng-submit="color.updateColor()" >
    <label for="hue">Hue:</label>
    <input type="text" id="hue" data-ng-model="color.hue" />
    <input type="submit" value="Submit" />
  </form>
  <form data-ng-submit="color.updateColor()"">
    <label for="saturation">Saturation:</label>
    <input type="text" id="saturation" data-ng-model="color.saturation" />
    <input type="submit" value="Submit" />
  </form>
  <form data-ng-submit="color.updateColor()">
    <label for="lightness">Lightness:</label>
    <input type="text" id="lightness" data-ng-model="color.lightness" />
    <input type="submit" value="Submit" />
  </form>

</body>

Code

vm.updateColor = function() {
    less.modifyVars({
        hue: vm.hue || 194.3,
        saturation: vm.saturation || 100,
        lightness: vm.lightness || 50
    });
};

And on html instead of calling three method on ng-submit call only one method vm.updateColor that will do less.modifyVars with all three variables.

Demo Plunkr

You are absolutely awesome! Thanks so much. You don't know how great it is to actually see the color I want ... lol! — MelissaMMDP, May 29 '15 at 14:03

How to update variables with input values in .less file dynamically using AngularJS

1 Answers1