कोणीय ब्रेडक्रंब: ड्रॉपडाउन सहित गतिशील रूप से ब्रेडक्रंब

Question

मैं कोणीय ब्रेडक्रंब निर्देश का उपयोग कर रहा हूं (यहां पाया गया: https://github.com/ncuillery/angular-breadcrumb) जो ब्रेडक्रंब बनाने के लिए यूआई-राउटर का उपयोग करता है।

इस बॉक्स से बाहर अच्छा काम करता है और सरल ब्रेडक्रम्ब नेविगेशन के लिए ठीक है। हालांकि, मैं जो करना चाहता हूं वह एक ड्रॉपडाउन प्रदर्शित करने के लिए एप्लिकेशन क्रंब पर क्लिक करने में सक्षम है और मुझे अन्य एप्लिकेशन चुनने की अनुमति देगा। एक अलग आवेदन का चयन करने के बाद गतिशील रूप से यूआरएल बदल जाएगा।

यहां तक ​​कि मुझे अब तक क्या मिला है, लेकिन यह सुनिश्चित नहीं है कि जब आप एक अलग एप्लिकेशन का चयन करते हैं तो ब्रेडक्रंब संरचना को बदलने के लिए मैं 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

यो यू टुकड़ा-लिंक के लिए एक नया निर्देश देते हैं चाहिए ... एक बेहतर समाधान एक उच्च प्राथमिकता के साथ अपने स्वयं के निर्देश बारे में हो सकता है ...

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>