Angular Breadcrumbs:包括动态更改面包屑的下拉列表

Question

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

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

您应该在 crumb-link 上附加一个新指令...更好的解决方案可以是编写您自己的具有高优先级的指令...

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>