วิธีอัปเดตตัวแปรด้วยค่าอินพุตในไฟล์ .less แบบไดนามิกโดยใช้ AngularJS

ฉันรู้ว่ามีการถามคำถามรูปแบบนี้มาก่อน (ดู 28208451) อย่างไรก็ตาม ฉันต้องได้รับค่าอินพุตแล้วตั้งค่าเป็นค่าใหม่เพื่อให้ฟิลด์อินพุตอื่นสามารถเข้าถึงได้ นี่คือลิงก์ไปยัง plunk ของฉัน

ฉันสามารถป้อนเฉดสีใหม่ได้ แต่จะไม่บันทึกเมื่อฉันพยายามเปลี่ยนความอิ่มสีหรือความสว่าง ฉันแน่ใจว่ามันเป็นการแก้ไขที่ง่าย (อาจเป็นคำสั่ง) แต่สำหรับชีวิตของฉัน ฉันไม่สามารถคลุมศีรษะได้ ฉันยังค่อนข้างใหม่กับ AngularJS ... ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชม

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