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

자바 스크립트

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

건배!