如何将不可点击的内容添加到角度引导手风琴标题？

Question

手风琴标题中的默认内容将全部可点击以切换该部分,但现在我需要在标题中添加其他不可点击的内容.怎么办？

<accordion-group is-open="OpenOneAtTime" ng-repeat="destination in mileage.destionations" style='position:relative;'>
    <accordion-heading>
        <!-- All I want is only make "Toggle Me" clickable, and leave other content in the header alone,just like pure text. -->
        <span ng-class="{'fa-chevron-down': OpenOneAtTime, 'fa-chevron-right': !OpenOneAtTime}">Toggle Me</span>
        <span ng-show='!OpenOneAtTime'>{{destination.Total}}+{{destination.To}}</span>
    </accordion-heading>
    <div class='accordion-section'>
        main content
    </div>
    <div class='clear'></div>
</accordion-group>

Answer 1

这并不容易做到。我还没有看到任何angular-ui-bootstrap可以改变这一点的选项。

但使用 CSS，您可以禁用pointer-events带有 class 的锚标记accordion-toggle并重新启用Toggle Me文本的事件。这有点棘手。

您可以尝试的另一件事是根据需要修改templateCachefor并设置其样式。template/accordion/accordion-group.html这可能更好，但我还没有尝试过。

应该可以在运行时更改该模板以进行自定义覆盖。如果没有，您可以修改模板的源文件并对其进行调整，但我会首先尝试是否可以以某种方式覆盖它。

css 方法有一些不完美的地方，我不知道如何修复它们：

1. 单击“切换我”将为整个标题添加下划线
2. 活动样式和悬停在链接上将使不可点击文本的下划线保持活动状态。

请查看下面或 jsfiddle 中的演示。

更新：

在那里的主存储库中，angular-ui-bootstrap您可以传递template-url以accordion-group使用您的自定义模板。这是一个相当新的提交。看这里。最新版本0.13.2没有该功能，但您仍然可以修改模板，但不太方便。

我现在会使用模板方法，因为它更干净。如果您必须使用Toggle Me!范围变量修改模板内部的文本，您可能需要检查是否可以装饰 Accordion-group 指令来添加该行为。

我用自定义手风琴模板创建了另一个jsfiddle 。

angular.module('demoApp', ['ui.bootstrap'])
    .controller('mainController', MainController);

function MainController($scope) {
    var itemCount = 0; // just to have an increasing title
    $scope.oneAtATime = true;
    $scope.mileage = {};
    $scope.mileage.destionations = [{
        Type: '',
        Reimbursable: "Yes",
        Distance: true,
        Odometer: false,
        total: itemCount,
        From: '',
        To: '',
        openState: true
    }];
    $scope.addNewDestination = function () {
        var index = $scope.mileage.destionations.length,
            openState = (index == 1);
        
        angular.forEach($scope.mileage.destionations, function(destination, index) {
            // turn all of except second
            destination.openState = (index == 1);
        });
        
        itemCount++;
        
        var newDestination = {
            type: '',
            reimbursable: "Yes",
            Distance: true,
            Odometer: false,
            total: itemCount,
            From: '',
            To: '',
            openState: openState
        };
        
        
        $scope.mileage.destionations.push(newDestination);
    }
    $scope.status = {
        isFirstOpen: true,
        isFirstDisabled: false
    };
}

.accordion-toggle {
    display: inline-block;
    /*cursor: default;
    */
    pointer-events: none;
}
.accordionSubtitle {
    display: inline-block;
    /*cursor: default;
    */
    pointer-events: auto;
}

.accordionSubtitle:hover{
    text-decoration: underline;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap-tpls.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
    <accordion close-others="oneAtATime">
    <accordion-group is-open="destination.openState" ng-repeat="destination in mileage.destionations" is-disabled="false">
        <accordion-heading>
            <span class="accordionSubtitle">toggle me </span> - {{destination.total}} this text is not clickable<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
        </accordion-heading>
      {{destination|json}}
    </accordion-group>
  </accordion>
    <button ng-click="addNewDestination()">add</button>
</div>