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

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

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

解决方法

这并不容易.我还没有看到angular-ui-bootstrap方面的任何选项来改变它.

但是使用CSS,您可以使用类accordion-toggle从anchor-tag中禁用pointer-events,并为Toggle Me文本重新启用事件.这有点棘手.

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

应该可以在运行时更改该模板以进行自定义覆盖.如果没有,你可以修改模板的源文件并调整它,但我会先尝试,如果你可以以某种方式覆盖它.

有一些点css方法不完美,我不知道如何解决它们：

>切换我点击将为整个标题加下划线
>活动样式和从链接悬停将使不可点击文本的下划线保持活动状态.

请看下面的演示或jsfiddle.

更新：

在angular-ui-bootstrap的主回购中,您可以将template-url传递给accordion-group以使用您的自定义模板.这是一个非常新的提交. See here.
最新版本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",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>