如何使用 AngularJS 动态更新 .less 文件中输入值的变量

Question

我意识到以前有人问过这个问题的形式（参见 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。

我可以输入一个新的色调，但当我尝试更改饱和度或亮度时它没有保存。我确信这是一个简单的修复（可能是一个指令），但对于我来说，我无法全神贯注。我在 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;
}

Answer 1

所有三个输入都应该有通用控制器，否则一个控制器中的范围值更改将不适用于另一个控制器

或

如果您想使用单独的控制器，那么您需要创建服务，所有变量的值都存储在其中。这将共享这些价值观。

创建一个单一的方法来更新 less 变量，这将为您解决问题。

标记

<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>

代码

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

并且在 html 上而不是在 ng-submit 上调用三个方法只调用一个方法 vm.updateColor 将对所有三个变量执行 less.modifyVars。

Demo Plunkr

如何使用 AngularJS 动态更新 .less 文件中输入值的变量

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

css

less

angularjs

angularjs-scope