Angular Breadcrumbs: Including dropdown that dynamically changes breadcrumbs

Question

I am using the Angular Breadcrumb directive (found here: https://github.com/ncuillery/angular-breadcrumb) which uses UI-Router to formulate breadcrumbs.

This works great out of the box and is fine for simple breadcrumb navigation. However, what I'd like to do is be able to click on the Application crumb, to display a dropdown and would allow me to select other applications. Choosing a different application would then change the URL dynamically.

Here's what I've got so far, but not sure how I could edit the displayName to change the breadcrumb structure when you select a different application.

index.html

<div class="app-breadcrumbs-container">
  <ui-breadcrumbs 
    displayname-property="data.displayName" 
    template-url="/shared/templates/breadcrumbs.html">
  </ui-breadcrumbs>
</div>

breadcrumbs.html

<div class="app-breadcrumb" flex>
    <ol>
      <li ng-repeat="crumb in breadcrumbs"
        ng-class="{ active: $last }">
        <a ui-sref="{{ crumb.route }}" ng-if="!$last">{{ crumb.displayName }}&nbsp;</a><span ng-show="$last">{{ crumb.displayName }}</span>
        <i ng-hide="$last" class="material-icons">keyboard_arrow_right</i>
      </li> 
    </ol>
</div>

stateprovider example

.state('apps', {
                    url: '',
                    views: {
                        'content@': {
                            templateUrl: 'index.html'
                        }
                    },
                    data: {
                        displayName: 'Application'
                    }
                }

Answer 1

You should attach a new directive to the crumb-link... A better solution could be write your own directive with an high priority...

angular
  .module('test', [])
  .controller('TestCtrl', function TestCtrl($scope) {
    var vm = $scope;

    vm.crumb = {
      route: 'https://github.com/angular-ui/ui-router',
      displayName: 'Visit Ui.Router',
      isDropdownOpen: false
    };
  
    vm.toggleDropdown = function(event, crumbItem) {
      event.preventDefault();
      
      console.log('Prevent navigation to: ', crumbItem.route);
      
      console.log(
                  'open the corrispective dropdown for crumbItem: ',
                  crumbItem.displayName
      );
      
      crumbItem.isDropdownOpen = !crumbItem.isDropdownOpen;
    };
  
  })
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<article ng-app="test">
  <div ng-controller="TestCtrl">
    <a ng-click="toggleDropdown($event, crumb)" ui-sref="{{ crumb.route }}" ng-bind="crumb.displayName"></a>
    
    <div> isDropdownOpen? <span ng-bind="crumb.isDropdownOpen | json"></span></div>
  </div>
</article>