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

Do you want to persist the active pages? If you click on an application in the dropdown, what should happen with e.g. Campagins or even further active states? — LordTribual, Oct 29 '15 at 07:49
Yes, it should persist through, such that the campaigns are refreshed based on the application chosen. — Ryan Drake, Oct 30 '15 at 01:17

score 2 · Answer 1 · answered Oct 29 '15 at 18:26

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>

Angular Breadcrumbs: Including dropdown that dynamically changes breadcrumbs

1 Answers1