如何动态使用AngularJS

我认识到这一问题的一种形式之前已被要求（见28208451），但是，我需要的输入值，然后将其设置为新的数值来更新.LESS文件的输入值的变量以便其他输入字段可以访问它。这是一个link to my plunk。如何动态使用AngularJS

我可以进入一个新的色调，但它不会被保存，当我试图改变饱和度或亮度。我相信这是一个简单的解决方案（可能是一个指令），但对于我的生活，我无法将头围绕在它周围。我在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; 
}

来源

2015-05-29 MAustinMMDP

我不知道该用例是在这里的东西，但要记住的是，根据少文档“[我们建议您使用浏览器仅用于开发更少]（HTTP：// lesscss .org/usage /＃using-less-in-the-browser）' - 如果目标是具有动态可变数据背景，则可以使用ng样式指令在元素上设置内联样式。我[更新了你的plunkr]（http://embed.plnkr.co/Stm0FZ/preview）。就我个人而言，我认为浏览器内的修改应该用类或可能的内联样式处理，而不是涉及较少。 –

我同意你的观点，通常我不会尝试它，但我想在我正在构建的应用程序中创建一个实时演示，以演示使用较少的颜色方案的幕后代。这是[pen]（http://codepen.io/MAustinMMDP/pen/MwaEyB），显示的代码越少。我意识到这已经与codepen完成了，但我认为创建一个不需要手动更改色调，饱和度和亮度变量的用户交互应用程序会很有趣。 – MAustinMMDP

实际上，无论哪种方式都需要编辑变量，但允许用户在窗口中进行交互将更加动态，然后必须手动编辑较少的代码。无论如何，我现在认为嵌入笔是更好的选择。我想我只是陷入了使它工作的状态，我忽视了它是否应该;）。感谢你的帮助！ – MAustinMMDP

您应该对所有三个输入通用控制器，否则在一个控制器的范围值变化不会对其他控制器提供

如果你想留在单独的控制器那么你需要创建将具有所有变量值存储在其中的服务。这将分享这些价值。

更新创建一个单一的方法更少的变量，会做的伎俩为您服务。

标记

<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

来源

2015-05-29 05:41:24

不幸的是，它仍然无法正常工作。我自己试过，当你改变194.3的默认色调为橙色的30，然后输入一个新的饱和度值时，饱和度将色调改变回默认的194.3。我需要能够调整新色相的饱和度和亮度30. – MAustinMMDP

@MAustinMMDP看看我的更新的解决方案..它应该现在工作.. –

你是绝对真棒！非常感谢。你不知道真正看到我想要的颜色有多伟大......哈哈！ – MAustinMMDP

如何动态使用AngularJS

回答

相关问题