如何使用AngularJS动态更新.less文件中的输入值变量
Posted
技术标签:
【中文标题】如何使用AngularJS动态更新.less文件中的输入值变量【英文标题】：How to update variables with input values in .less file dynamically using AngularJS 【发布时间】：2015-08-11 20:37:30 【问题描述】：我意识到以前有人问过这个问题的一种形式（请参阅28208451），但是，我需要获取输入值，然后将其设置为新值，以便其他输入字段可以访问它。这是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;
【问题讨论】：
我不确定这里的用例是什么，但请记住，根据较少的文档'We recommend using less in the browser only for development' - 如果目标是动态更新背景，你可以使用 ng-style 指令在元素上设置内联样式。我有updated your plunkr。我个人认为浏览器内的修改应该使用类或可能的内联样式来处理，而不是更少。 我同意你的观点，通常我不会尝试，但我想在我正在构建的应用程序中创建一个现场演示，以演示使用 less 的颜色方案的幕后生成。这是一个pen，它显示了更少的代码。我意识到这已经用 codepen 完成了，但我认为创建一个不需要手动更改色调、饱和度和亮度变量的用户交互应用程序会很有趣。 实际上，无论哪种方式都需要编辑变量，但允许用户在窗口中交互会更加动态，然后必须手动编辑更少的代码。无论如何，我现在相信只嵌入笔是一种更好的方法。我想我只是太着迷于让它发挥作用，以至于忘记了它是否应该；）。感谢您的所有帮助！ 【参考方案1】：您应该为所有三个输入使用公共控制器，否则一个控制器中的范围值更改将不适用于另一个控制器
或
如果您想使用单独的控制器，那么您需要创建将所有变量的值存储在其中的服务。这将共享这些价值观。
创建一个方法来更新更少的变量，这将为您解决问题。
标记
<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文件中的输入值变量的主要内容，如果未能解决你的问题，请参考以下文章