Cara memperbarui variabel dengan nilai input dalam file .less secara dinamis menggunakan AngularJS

Saya menyadari bentuk pertanyaan ini telah ditanyakan sebelumnya (lihat 28208451), namun, saya perlu mendapatkan nilai input dan kemudian menetapkannya sebagai nilai baru sehingga kolom input lain dapat mengaksesnya. Berikut ini tautan ke plunk saya.

Saya dapat memasukkan rona baru namun tidak disimpan saat saya mencoba mengubah saturasi atau kecerahan. Saya yakin ini adalah perbaikan yang mudah (mungkin sebuah arahan) tetapi demi kehidupan saya, saya tidak bisa memikirkannya. Saya masih cukup baru di AngularJS... bantuan apa pun akan sangat kami hargai.

**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 sumber
comment
Saya tidak yakin apa kasus penggunaannya di sini, namun perlu diingat bahwa, menurut dokumen yang lebih sedikit 'Kami merekomendasikan penggunaan less di browser hanya untuk pengembangan' - jika tujuannya adalah untuk memiliki latar belakang yang dapat diperbarui secara dinamis, Anda dapat menggunakan arahan gaya ng untuk menyetel gaya sebaris pada elemen. Saya telah memperbarui plunkr Anda. Secara pribadi menurut saya modifikasi dalam browser harus ditangani dengan kelas atau mungkin gaya sebaris, daripada melibatkan lebih sedikit.   -  person Matthew de Nobrega    schedule 29.05.2015
comment
Saya setuju dengan Anda dan biasanya saya tidak akan mencobanya tetapi saya ingin membuat demo langsung di aplikasi yang saya buat untuk mendemonstrasikan pembuatan skema warna di balik layar dengan menggunakan lebih sedikit. Berikut adalah pen yang menampilkan kode lebih sedikit. Saya menyadari hal ini telah dilakukan dengan codepen tetapi saya pikir akan menyenangkan untuk membuat aplikasi dengan interaksi pengguna yang tidak memerlukan perubahan variabel rona, saturasi, dan kecerahan secara manual.   -  person MelissaMMDP    schedule 29.05.2015
comment
Sebenarnya, cara mana pun memerlukan pengeditan variabel tetapi mengizinkan interaksi pengguna di jendela akan lebih dinamis daripada harus mengedit kode yang lebih sedikit secara manual. Terlepas dari itu, saya sekarang percaya bahwa menyematkan pena adalah cara yang lebih baik. Saya pikir saya terlalu sibuk dalam membuatnya berhasil sehingga saya lupa apakah itu harus dilakukan atau tidak;). Terima kasih atas seluruh bantuan Anda!   -  person MelissaMMDP    schedule 29.05.2015

Jawaban (1)


arrow_upward
2
arrow_downward

Anda harus memiliki pengontrol umum untuk ketiga input jika tidak, perubahan nilai cakupan di satu pengontrol tidak akan tersedia untuk pengontrol lainnya

ATAU

Jika Anda ingin tetap menggunakan pengontrol terpisah maka Anda perlu membuat layanan yang akan menyimpan nilai semua variabel di dalamnya. Hal ini akan menyebarkan nilai-nilai tersebut.

Buat satu metode untuk memperbarui lebih sedikit variabel yang akan membantu Anda.

Markup

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

Kode

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

Dan di html, alih-alih memanggil tiga metode di ng-submit, panggil hanya satu metode vm.updateColor yang akan melakukan less.modifyVars dengan ketiga variabel.

Demo Plunkr

person Pankaj Parkar    schedule 29.05.2015
comment
Anda benar-benar luar biasa! Terima kasih banyak. Anda tidak tahu betapa hebatnya melihat warna yang saya inginkan... haha! - person MelissaMMDP; 29.05.2015
comment
Saya merasa seperti saya akhirnya memiliki penutupan;) - person MelissaMMDP; 29.05.2015