Question

问题的解决方案已经存在/我。但是如果我将资源文件版本（在head标签内）从 ui-bootstrap-tpls-2.5.0.js 更改为 ui-bootstrap-tpls-1.2.1.js ，它不能正常工作....因为我已经完成了90％的工作 ui-bootstrap-tpls-1.2.1.js ，所以不可能包含 ui-bootstrap -tpls-2.5.0.js 对我来说（如果我改变这些，其他功能都不起作用）。

1。Plunker demo which contains ui-bootstrap-tpls-2.5.0.js

2。Plunker demo which contains ui-bootstrap-tpls-1.2.1.js

总之，我需要使用 ui-bootstrap-tpls-1.2.1.js 更改_ uib-accordion-heading __的颜色/背景颜色，任何人都可以帮助我....

HTML

<div ng-controller="AccordionDemoCtrl">
    <script type="text/ng-template" id="group-template.html">
        <div class="panel-heading" style="background-color:blue;">
            <h4 class="panel-title" style="color:red;">
                <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
                    <span uib-accordion-header ng-class="{'text-muted': isDisabled}">
                        {{heading}}
                    </span>
                </a>
            </h4>
        </div>
        <div class="panel-collapse collapse" uib-collapse="!isOpen">
            <div class="panel-body" style="text-align: right" ng-transclude></div>
        </div>
    </script>
    <uib-accordion close-others="oneAtATime">
        <div uib-accordion-group class="panel-default" heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
            This content is straight in the template.
        </div>
        <div uib-accordion-group class="panel-default" heading="{{group.title}}" ng-repeat="group in groups">
            {{group.content}}
        </div>
        <div uib-accordion-group class="panel-default" heading="Dynamic Body Content">
            <p>The body of the uib-accordion group grows to fit the contents</p>
            <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
            <div ng-repeat="item in items">{{item}}</div>
        </div>
        <div uib-accordion-group class="panel-info" heading="Custom template" template-url="group-template.html">
            Hello
        </div>
        <div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html">
            <uib-accordion-heading>
                Custom template with custom header template <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isCustomHeaderOpen, 'glyphicon-chevron-right': !status.isCustomHeaderOpen}"></i>
            </uib-accordion-heading>
            World
        </div>
    </uib-accordion>
</div>

Answer 1

<强> HTML

<div ng-controller="AccordionDemoCtrl">
<script type="text/ng-template" id="group-template.html">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
                <span uib-accordion-header ng-class="{'text-muted': isDisabled}">
                    {{heading}}
                </span>
            </a>
        </h4>
    </div>
    <div class="panel-collapse collapse" uib-collapse="!isOpen">
        <div class="panel-body" style="text-align: right" ng-transclude></div>
    </div>
</script>
<uib-accordion close-others="oneAtATime">
    <div uib-accordion-group class="panel-default" heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
        This content is straight in the template.
    </div>
    <div uib-accordion-group class="panel-default" heading="{{group.title}}" ng-repeat="group in groups">
        {{group.content}}
    </div>
    <div uib-accordion-group class="panel-default" heading="Dynamic Body Content">
        <p>The body of the uib-accordion group grows to fit the contents</p>
        <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
        <div ng-repeat="item in items">{{item}}</div>
    </div>
    <div uib-accordion-group class="panel-info" heading="Custom template" template-url="group-template.html">
        Hello
    </div>
    <div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html">
        <uib-accordion-heading>
            Custom template with custom header template <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isCustomHeaderOpen, 'glyphicon-chevron-right': !status.isCustomHeaderOpen}"></i>
        </uib-accordion-heading>
        World
    </div>
</uib-accordion>

<强> CSS

.panel-info .panel-heading { background: blue; color: red; }

如果要将自定义样式应用于默认值，请使用以下css

.panel-default .panel-heading { /* Css Properties */ }

Answer 2

您可以使用此css规则覆盖javascript文件生成的样式以解决问题。

.panel-default > .panel-heading {
  color: #f00 !important;
  background-color: #00f !important;
}

如何更改uib-accordion-heading的样式属性

2 个答案: