Ищет простую угловую директиву класса, которая применяет цвет фона

Question

У меня есть модальный экран, ng-repeat отображает список флажков с ng-моделью. Я обнаружил, что ng-модаль делает галочку зеленой рамкой.

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

Я добавил стиль к флажку background-color: #FFFFFF; это удалило зеленую границу.

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

Answer 1

Директивы не требуются.

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

Если вы не означало «нг-модель», а не «нг-модальный» в вашем вопросе, в этом случае:

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

Answer 2

Если вы должны использовать директиву по какой-то причине, а не класс CSS, вот как вы могли это сделать.

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