Изменение цвета входного заполнителя с использованием стиля ng

Question

В моем контроллере есть переменная $ scope для определения цвета входного заполнителя, который я хочу встроить в мой HTML-код.

Переменная $ scope определена следующим образом:

$scope.primaryColor={"color":colorVar}; //colorVar is the color in hex

Цветовая переменная имеет динамическое значение, и я хотел бы использовать стиль ng для тега html ввода, чтобы установить свойство цвета для заполнителя внутри ввода.

<input required name="email" ng-model="email" placeholder="hi@whatever.com" ng-style="">

Мне известно, что я не могу изменить свойство цвета заполнителя с помощью встроенного CSS. Есть ли способ передать цветную переменную в CSS, используя стиль ng или любые другие методы?

Как я могу это сделать?

Answer 1

Вы пытались создать таблицу стилей динамически? Это может быть не самым элегантным, но это будет работать.

const sheet = document.createElement('style');
document.body.appendChild(sheet);
sheet.innerHTML = '.btn-primary {background-color: ' + colorVar  + '!important;}';
sheet.insertAdjacentHTML('beforeend', 'input::placeholder {color:' + colorVar + '!important;}');

Вам нужно будет соответственно импортировать переменные из базы данных или в любое место, где вы храните цветовые коды, и вам также нужно будет определить лучшее место для размещения этого кода в вашем приложении, но это должно помочь вам.

Answer 2

Добавление ng-класса к префиксу вендора делает свое дело

HTML:

 <input type="text" placeholder="Quick test" required="" 
class="ng-pristine ng-invalid ng-invalid-required ng-touched"> 

Scss:

.ng-touched::-webkit-input-placeholder { color: red; }
.ng-untouched::-webkit-input-placeholder { color: #cccccc; }