breadcrumb angolari: inclusione del menu a discesa che modifica dinamicamente il pane grattugiato

Question

Sto utilizzando la direttiva Angular Breadcrumb (trovata qui: https://github.com/ncuillery/angular-breadcrumb) che utilizza l'UI-Router per formulare i breadcrumb.

Questa grande opera fuori dalla scatola e va bene per semplice navigazione breadcrumb. Tuttavia, quello che mi piacerebbe fare è essere in grado di fare clic sul briciolo dell'applicazione, per visualizzare un menu a discesa e consentire di selezionare altre applicazioni. La scelta di un'applicazione diversa dovrebbe quindi cambiare l'URL in modo dinamico.

Ecco cosa ho ottenuto finora, ma non sono sicuro di come modificare displayName per modificare la struttura di breadcrumb quando si seleziona un'applicazione diversa.

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 esempio

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

Answer 1

Yo u dovrebbe allegare una nuova direttiva per la mollica-link ... Una soluzione migliore potrebbe essere scrivere il proprio direttiva con una priorità elevata ...

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>