无法更改 Angular UI 中复选框按钮的背景颜色

Question

In this plunk 我有一个 Angular UI 复选框按钮，激活时（即按下）需要显示黄色背景和红色字体。这意味着如果您点击多次，颜色应该从黄色背景变为蓝色背景等等。尽管如此，由于当您单击按钮时具有焦点，它不会改变颜色并且背景始终为蓝色。如何解决这个问题？

HTML

  <style>
    .my-active-class {
      background-color: yellow;
      color: red;
    }
  </style>

  <div ng-controller="ButtonsCtrl">
   <buttondir></buttondir>
  </div>

Javascript

var app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
app.controller('ButtonsCtrl', function($scope) {
});

app.directive('buttondir', function (uibButtonConfig) {

    uibButtonConfig.activeClass = 'my-active-class';

    var directive = {};

    directive.restrict = 'EA';

    directive.scope = {
      control: '='
    };

    directive.template = '<button type="button" class="btn btn-primary" ng-model="singleModel" uib-btn-checkbox ' +
    ' btn-checkbox-true="1" btn-checkbox-false="0"> Single Toggle </button>';

    directive.link = function (scope, element, attrs) {
      scope.singleModel = 1;
    };

    return directive;

});

Answer 1

您好，请在此处查找更新的答案！

问题是 .btn-primary:focus 也在申请 .my-active-class

所以为了解决这个问题，我默认将 bootstrap class 覆盖为 .my-active-class

.my-active-class, .my-active-class:focus {
  background-color: yellow;
  color: red;
}

请在这里找到工作的插件：http://plnkr.co/edit/PuNRtiTZ25JV0zJL1UCn?p=preview

干杯！

无法更改 Angular UI 中复选框按钮的背景颜色

Cannot change background color of checkbox button in Angular UI

angularjs

angular-ui