Angular-Breadcrumb：父母國家的標籤爲空

Question

我使用angular-breadcrumb module構建導航面板。

我有顯示雙親狀態的動態標籤一個問題：啓動的時候，孩子的標籤顯示和父母的一個是空的。兩種狀態使用不同的控制器

我的設置有什麼問題？

var parentState = { 
    name: 'parentState', 
    parent: 'parentParentState', 
    url: '/:department_id/object/:object_id?department_name&object_name', 
    ncyBreadcrumb: { 
     label: '<% resNavCtrl.stateLabel %>' 
    }, 
    views: { 
     'main': { 
      controller: 'resourcesNavController', 
       controllerAs: 'resNavCtrl', 
       templateUrl: templateUrl 
      } 
    }, 
    params: { 
     department_name: null, 
     object_name: null 
    },   
}; 

var childState = { 
    name: 'childState', 
    parent: 'parentState', 
    url: '/:resourceType?resourceTypeName', 
    ncyBreadcrumb: { 
     label: '<% resCtrl.stateLabel %>' 
    }, 
    views: { 
     'main@': { 
      controller: 'resourcesController', 
      controllerAs: 'resCtrl', 
      templateUrl: templateUrl 
     } 
    }, 
    params: { 
     resourceType: '', 
     resourceTypeName: '' 
    }   
}; 

Answer 1

你可以用這個來代替麪包屑

使用此指令<div md-breadcrumb></div>或<md-breadcrumb></md-breadcrumb>

注意：此功能僅Angular UI Router

MD-breadcrumb.tmpl.html工作

<article> 
    <nav class="breadcrumb-block" role="navigation"> 

     <a href="#" class="breadcrumb-icon"><span class="icon-breadcrumb-mobile"></span></a> 
     <div class="nav-wrapper breadcrumb-content"> 
      <a ng-repeat="breadcrumb in breadcrumbs track by $index" ng-if="!$first" href="" class="breadcrumb" title="{{breadcrumb.url}}" ng-click="onClickingLink($event, breadcrumb)">{{breadcrumb.url | firstLetterCaps}}</a> 
     </div> 
     <div ui-view class="breadcrumb-child"></div> 
    </nav> 
</article> 

MD-breadcrumb.ctrl.js

function breadcrumbController($scope, $state) { 
    $scope.breadcrumbs = []; 
    stateChanged(); // call to get initial breadcrumb 

    // change breadcrumb on each state change success 
    $scope.$on('$stateChangeSuccess', stateChanged); 

    // executes on $stateChangeSuccess 
    function stateChanged(){ 
     $scope.breadcrumbs = getParentList($state.$current); // holds all active states 
     $scope.onClickingLink = onClickingLink; // holds link clicking function 
     $scope.breadcrumbs.reverse(); // reverse breadcrumbs child to root states 
    } 

    // executes on link click 
    function onClickingLink(event, breadcrumb) { 
     event.preventDefault(); // prevent default action 
     $state.go(breadcrumb.stateName); // move to state 
    } 

    // below function used to get parent states 
    function getParentList(state) { 
     var parentList = []; // holds parent states list 
     while(state) { // loop until root state occurs 

      // push into parentList array 
      parentList.push({'state': state, 'url': state.self.url.slice(1, state.self.url.length), 'stateName': state.toString()}); 
      state = state.parent; // make parent as current state for loop 
     } 
     return parentList; // return parentList 
    } 
} 

MD-breadcrumb.directive.js

function breadcrumbDirective() { 
    return { 
     restrict: 'EA', 
     templateUrl: 'md-breadcrumb.tmpl.html', 
     controller: breadcrumbController 
    } 
} 

MD-breadcrumb.css

.breadcrumb:before { 
    display: none; 
} 

.breadcrumb-block { 
    box-shadow: none; 
    background: inherit; 
    height: auto; 
    line-height: 1.5; 
    margin-top: 0px; 
    padding-right: 12px; 
} 

.breadcrumb-block .breadcrumb { 
    color: #ffffff; 
    font-size: 14px; 
    padding: 8px 18px 8px 28px; 
    background: #015798; 
    position: relative; 
    display: block; 
    float: left; 
} 
.breadcrumb-block .breadcrumb:hover, .breadcrumb-block .breadcrumb:focus { 
    background-color: #0288D1; 
    outline: none; 
} 
.breadcrumb-block .breadcrumb:hover:after, .breadcrumb-block .breadcrumb:focus:after { 
    border-left: 10px solid #0288D1; 
} 
.breadcrumb-block .breadcrumb:first-child { 
    padding-left: 18px; 
} 
.breadcrumb-block .breadcrumb:last-child{ 
    color: #ffffff; 
    /*font-size: 13px; 
    font-weight: 500;*/ 
    background-color: #0288D1; 
} 
.breadcrumb-block .breadcrumb:last-child:after { 
    border-left: 10px solid #0288D1; 
} 
.breadcrumb-content:after { 
    display: block; 
    content: " "; 
    clear: both; 
} 
.breadcrumb-block .breadcrumb-icon:after, 
.breadcrumb-block .breadcrumb:after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0; 
    border-top: 20px solid transparent; 
    border-bottom: 20px solid transparent; 
    border-left: 10px solid #015798; 
    position: absolute; 
    top: 50%; 
    margin-top: -20px; 
    left: 100%; 
    z-index: 1; 
} 
.breadcrumb-block .breadcrumb-icon:before, 
.breadcrumb-block .breadcrumb:before { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0; 
    border-top: 20px solid transparent; 
    border-bottom: 20px solid transparent; 
    border-left: 10px solid #DDDAD5; 
    position: absolute; 
    top: 50%; 
    margin-top: -20px; 
    margin-left: 1px; 
    left: 100%; 
    z-index: 1; 
} 


.breadcrumb-block .breadcrumb-icon:after { 
    border-left: 10px solid #FFF; 
} 

/*.breadcrumb-block .breadcrumb:last-child:after { 
    content: " "; 
    display: block; 
    border-left-color: #fff; 
}*/ 
.breadcrumb-block .breadcrumb:last-child:before { 
    content: " "; 
    display: block; 
} 

.breadcrumb-block .breadcrumb-icon { 
    font-size: 16px; 
    color: #B8B8B8; 
    display: none; 
    padding: 10px 12px 12px 12px; 
    background: #fff; 
    width: 40px; 
    height: 40px; 
    position: relative; 
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); 
} 

.breadcrumb-content { 
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); 
    display: inline-block; 
} 

.breadcrumb-block a:focus { 
    border-bottom: 0px none; 
} 

@media only screen and (max-width: 799px) { 
    .breadcrumb-block .breadcrumb-icon { 
     display: block; 
     margin-bottom: 5px; 
    } 
    .breadcrumb-block .breadcrumb-content .breadcrumb { 
     display: block; 
     width: 100%; 
     margin-bottom: 5px; 
    } 
    .breadcrumb-block .breadcrumb:before, 
    .breadcrumb-block .breadcrumb:after { 
     /*content: "";*/ 
     /*display: none;*/ 
    } 
    .breadcrumb-block .breadcrumb { 
     padding-left: 18px; 
     box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); 
    } 
    .breadcrumb-content { 
     display: block; 
     box-shadow: 0 0px 0px 0 rgba(0,0,0,0.0); 
     width: 100%; 
    } 



} 
.subcrumb { 
    color: #015798; 
    cursor: pointer; 
} 
.breadcrumb-child { 
    padding: 20px; 
    font-size: 15px; 
}