Angular Breadcrumbs: Einschließlich Dropdown-Liste, das Brotkrumen dynamisch ändert

Question

Ich verwende die Angular Breadcrumb-Direktive (hier gefunden: https://github.com/ncuillery/angular-breadcrumb), die UI-Router verwendet, um Paniermehl zu formulieren.

Das aus der Box funktioniert gut und ist für einfache Brotkrumennavigation in Ordnung. Was ich jedoch tun möchte, ist in der Lage zu sein, auf den Application crumb zu klicken, um ein Dropdown-Menü anzuzeigen und mir die Auswahl anderer Anwendungen zu ermöglichen. Wenn Sie eine andere Anwendung auswählen, wird die URL dynamisch geändert.

Hier ist, was ich bisher habe, aber nicht sicher, wie ich die displayName bearbeiten könnte, um die Breadcrumb-Struktur zu ändern, wenn Sie eine andere Anwendung auswählen.

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 Beispiel

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

Answer 1

Yo u sollte eine neue Richtlinie auf die Krume-link ... Eine bessere Lösung anhängen könnte Ihre eigene Richtlinie mit einer hohen Priorität schreiben ...

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>