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>

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

1 个答案: