無法更改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

因此應用在解決，我有重寫引導默認類.my-active-class

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

請在這裏找到工作plunker：http://plnkr.co/edit/PuNRtiTZ25JV0zJL1UCn?p=preview

乾杯！