寻找一个应用背景颜色的简单角度类指令答案

【问题标题】：Looking for a simple angular class directive that applies background color寻找一个应用背景颜色的简单角度类指令
【发布时间】：2013-10-12 03:22:30
【问题描述】：

我有一个模态屏幕，一个 ng-repeat 显示一个带有 ng-model 的复选框列表。我发现 ng-modal 使复选框显示绿色边框。

        <div class="modal-body">
        <span ng-repeat="ptField in myForm.fieldsFromType" ng-hide="getFieldIndex(ptField.name) != -1">
            <label class="checkbox" for="{{item.id}}">
                <input type="checkbox" ng-model="ptField.checked" id="{{item.id}}"> {{ptField.label}}
            </label>
        </span>
    </div>

我为复选框背景颜色添加了一个样式：#FFFFFF;这删除了绿色边框。

我想构建一个非常简单的指令，用于所有显示为绿色边框的复选框。最好的方法是什么？

【问题讨论】：

为什么你需要一个指令？对于 CSS 类的用途来说，这听起来像是矫枉过正。
我将有多个带有复选框的页面，我不想继续在 css 中应用它们。我认为一个简单的指令会容易得多。
恰恰相反，您可以创建一个 CSS 选择器，自动选择所有这些选择器，这比对所有这些选择器应用指令要少得多。看起来您已经选择了带有指令的答案，但是……这是个坏主意。我在下面的回答应该可以正常工作。最多你应该对所有的复选框应用一个通用类并在上面使用一个选择器。

标签： class angularjs background-color directive restrict

【解决方案1】：

不需要指令。

.modal-body input[type='checkbox'] {
  background-color: #FFF;
}

除非您在问题中指的是“ng-model”而不是“ng-modal”，在这种情况下：

input[type='checkbox'][ng-model] {
  background-color: #FFF;
}

【讨论】：

你是对的，应用css选择器是一个更好的主意。

【解决方案2】：

如果由于某种原因你必须使用指令，而不是 CSS 类，这里你可以怎么做。

.directive('checkbox', function () {
  return {
    restrict: 'A',
    link: function (scope, elem, attrs) {
      var color = "red";
      elem.css({"background-color":color});
    }
  }
});

【讨论】：

对不起，我的意思是 ng-model。