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

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

问题是.my-active-class也适用于.my-active-class

因此，在解决方案中，我将默认类覆盖引导至.my-active-class, .my-active-class:focus { background-color: yellow; color: red; }

realNumbers = nan(1,10);
realNumbers(numbers) = numbers

请在此处找到工作人员：http://plnkr.co/edit/PuNRtiTZ25JV0zJL1UCn?p=preview

干杯！

无法更改Angular UI

1 个答案: