javascript - Angular 面包屑 : Including dropdown that dynamically changes breadcrumbs

Question

我正在使用 Angular Breadcrumb 指令(可在此处找到:https://github.com/ncuillery/angular-breadcrumb)，它使用 UI-Router 来制定面包屑。

开箱即用，适用于简单的面包屑导航。但是，我想要做的是能够单击应用程序碎屑，显示下拉列表并允许我选择其他应用程序。选择不同的应用程序将动态更改 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>

状态提供者示例

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

Answer 1

您应该将新指令附加到面包屑链接...更好的解决方案是编写您自己的具有高优先级的指令...

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>