角麪包屑：包括下拉動態改變的麪包屑

我現在用的是角麪包屑指令（在這裏找到：https://github.com/ncuillery/angular-breadcrumb），它採用UI-路由器制定麪包屑。角麪包屑：包括下拉動態改變的麪包屑

這個偉大的工程開箱即用，是對簡單的麪包屑導航。不過，我想要做的是能點擊應用屑，顯示一個下拉列表，可以讓我選擇其他應用程序。選擇不同的應用程序會動態改變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: { 
         '[email protected]': { 
          templateUrl: 'index.html' 
         } 
        }, 
        data: { 
         displayName: 'Application' 
        } 
       }

來源

2015-10-14 Ryan Drake

你想持續活躍網頁？如果您在下拉列表中點擊一個應用程序時，應例如發生什麼Campagins甚至進一步活躍的國家？ – LordTribual

是的，它應該通過堅持，使得活動都以選擇的應用程序更新。 – iamryandrake

@ryan你解決這個問題？我和你一樣 – DannyG

喲ü應該附加一個新的指令到麪包屑鏈接... 一個更好的解決辦法是用高優先級的編寫自己的指令......

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>

來源

2015-10-29 18:26:17 Hitmands

角麪包屑：包括下拉動態改變的麪包屑

回答

相關問題