Đường dẫn góc: Bao gồm danh sách thả xuống tự động thay đổi đường dẫn

Question

Tôi đang sử dụng hướng dẫn Đường dẫn góc (tìm thấy ở đây: https://github.com/ncuillery/angular-breadcrumb) sử dụng Giao diện người dùng-Router để tạo đường dẫn.

này hoạt động tuyệt vời ra khỏi hộp và là tốt cho chuyển hướng mẩu bánh mì đơn giản. Tuy nhiên, những gì tôi muốn làm là có thể bấm vào mẩu ứng dụng, để hiển thị một trình đơn thả xuống và sẽ cho phép tôi chọn các ứng dụng khác. Chọn một ứng dụng khác sau đó sẽ thay đổi URL động.

Đây là những gì tôi đã có cho đến nay, nhưng không chắc làm thế nào tôi có thể chỉnh sửa displayName để thay đổi cấu trúc đường dẫn khi bạn chọn một ứng dụng khác.

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 dụ

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

Answer 1

Yo u nên đính kèm một chỉ thị mới cho cốm-link ... Một giải pháp tốt hơn có thể được viết chỉ thị của riêng bạn với một ưu tiên cao ...

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>