Как динамически обновлять переменные с входными значениями в файле .less с помощью AngularJS

Я понимаю, что форма этого вопроса задавалась ранее (см. 28208451), однако мне нужно получить входное значение, а затем установить его как новое значение, чтобы другие поля ввода могли получить к нему доступ. Вот ссылка на мой планк.

Я могу ввести новый оттенок, но он не сохраняется, когда я пытаюсь изменить насыщенность или яркость. Я уверен, что это легко исправить (возможно, директива), но для жизни я не могу обдумать это. Я все еще новичок в 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;
}

css angularjs less angularjs-scope
person MelissaMMDP    schedule 29.05.2015    source источник
comment
Я не уверен, какой здесь вариант использования, но имейте в виду, что, согласно меньшей документации 'Мы рекомендуем использовать less в браузере только для разработки'. Если цель состоит в том, чтобы иметь динамически обновляемый фон, вы можете использовать директиву ng-style для установки встроенного стиля в элемент. Я обновил ваш plunkr. Лично я считаю, что модификации в браузере должны обрабатываться с помощью классов или, возможно, встроенных стилей, а не с меньшими затратами.   -  person Matthew de Nobrega    schedule 29.05.2015
comment
Я согласен с вами, и обычно я бы не стал пытаться это сделать, но я хотел создать живую демонстрацию в приложении, которое я создаю, чтобы продемонстрировать закулисную генерацию цветовой схемы с использованием меньшего количества. Вот ручка, которая показывает меньше кода. Я понимаю, что это уже было сделано с помощью codepen, но я подумал, что было бы интересно создать приложение с взаимодействием с пользователем, которое не требует ручного изменения переменных оттенка, насыщенности и яркости.   -  person MelissaMMDP    schedule 29.05.2015
comment
На самом деле, в любом случае потребуется редактирование переменных, но разрешение взаимодействия с пользователем в окне будет более динамичным, чем необходимость редактирования меньшего количества кода вручную. Несмотря на это, теперь я считаю, что просто встроить перо — это лучший способ. Я думаю, что я просто настолько увлекся тем, чтобы заставить его работать, что потерял из виду, должно ли это быть или нет ;). Спасибо за вашу помощь!   -  person MelissaMMDP    schedule 29.05.2015

Ответы (1)


arrow_upward
2
arrow_downward

У вас должен быть общий контроллер для всех трех входов, иначе изменение значения области действия в одном контроллере не будет доступно для другого контроллера.

ИЛИ

Если вы хотите остаться с отдельным контроллером, вам нужно создать сервис, в котором будут храниться значения всех переменных. Это разделит эти ценности между собой.

Создайте единый метод для переменных без обновлений, который поможет вам.

Разметка

<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 со всеми тремя переменными.

Демонстрационный план

person Pankaj Parkar    schedule 29.05.2015
comment
Вы абсолютно потрясающие! Большое спасибо. Вы не представляете, как здорово видеть тот цвет, который я хочу... лол! - person MelissaMMDP; 29.05.2015
comment
Я чувствую, что наконец-то закрылся ;) - person MelissaMMDP; 29.05.2015