角度ブレッドクラム：ブレッドクラムを動的に変更するドロップダウンを含む

Question

ブレッドクラムを作成するためにUI-Routerを使用するAngular Breadcrumbディレクティブ（ここでは、https://github.com/ncuillery/angular-breadcrumb）を使用しています。

これは、箱から出して素晴らしい作品とシンプルな階層リンクナビゲーションのための罰金です。しかし、私がしたいのは、アプリケーションのクラムをクリックしてドロップダウンを表示し、他のアプリケーションを選択できるようにすることです。別のアプリケーションを選択すると、URLが動的に変更されます。

これまでのところ、私はdisplayNameを編集して、別のアプリケーションを選択したときのブレッドクラム構造を変更する方法がわからない場合があります。

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

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

Answer 1

ヨUは、アクティブを持続しますかより良い解決策は

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>