How to add unclickable content into angular bootstrap accordion header?

Question

The default content in the accordion-heading will be all clickable to toggle the section, but now I need to add something else into header which is not clickable. How can do that?

<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

That's not easy todo. I haven't seen any options from angular-ui-bootstrap side to change this.

But with CSS you could disable the pointer-events from the anchor-tag with class accordion-toggle and re-enable the events for your Toggle Me text. It's a bit tricky.

Another thing you could try is to modify the templateCache for template/accordion/accordion-group.html and style it as you need it. That's probably better but I haven't tried this yet.

It should be possible to change that template during runtime to make a custom override. If not you could modify the source file of the template and adapt it but I would first try if you could override it somehow.

There are some points with the css approach not perfect and I'm not sure how to fix them:

1. Toggle me click will underline the whole heading
2. Active style and hovering from the link will keep the underline of the not clickable text active.

Please have a look at the demo below or in this jsfiddle.

Update:

In the master repo of angular-ui-bootstrap there you could pass template-url into accordion-group to use your custom template. It's a pretty new commit. See here. The latest version 0.13.2 is with-out that feature but you can modify the template anyway but not so convenient.

I would now use the template approach because it's cleaner. If you have to modify the Toggle Me! text inside of the template with a scope variable you probably need to check if you can decorate the accordion-group directive to add that behaviour.

I've created another jsfiddle with the custom accordion template.

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>