如何通过ng-style动态设置input占位符颜色？

这问题我之前也碰到过，确实ng-style没法直接控制伪元素（比如::placeholder）的样式，不过有两个靠谱的办法能实现你要的动态占位符颜色需求：

方法一：CSS自定义属性（变量）+ ng-style #

这种方法最简洁，利用CSS变量的特性间接传递动态颜色值给伪元素：

1. 简化控制器变量：不用把颜色包成对象，直接存储十六进制值即可：

$scope.primaryColor = colorVar; // colorVar是你的动态十六进制颜色值

2. 在input标签上用ng-style设置CSS变量：

<input 
  required 
  name="email" 
  ng-model="email" 
  placeholder="hi@whatever.com" 
  ng-style="{'--placeholder-color': primaryColor}"
>

3. 通过CSS引用变量设置占位符颜色：

input::placeholder {
  color: var(--placeholder-color);
}

原理是：ng-style可以给元素的内联style添加自定义CSS变量，而伪元素::placeholder能通过var()引用这个变量，当primaryColor动态变化时，占位符颜色会同步更新。

方法二：自定义AngularJS指令 #

如果需要更灵活的控制（比如兼容极少数不支持CSS变量的老旧浏览器），可以写一个自定义指令来处理：

1. 定义指令：

angular.module('yourApp').directive('placeholderColor', function() {
  return {
    scope: {
      placeholderColor: '='
    },
    link: function(scope, element) {
      // 监听颜色值变化，更新CSS变量
      scope.$watch('placeholderColor', function(newColor) {
        if (newColor) {
          element[0].style.setProperty('--placeholder-color', newColor);
        }
      });
    }
  };
});

2. 在input标签上使用指令：

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

3. 同样用CSS引用变量：

input::placeholder {
  color: var(--placeholder-color);
}

这个方法本质和第一种类似，只是把设置CSS变量的逻辑封装到了指令里，适合需要多处复用该功能的场景。

内容的提问来源于stack exchange，提问作者Hussain Mahfoodh