javascript - Angular 面包屑 : parent state's label is empty

Question

我正在使用angular-breadcrumb module构建导航面板。

我在显示父状态的动态标签时遇到问题:激活后，会显示子标签，而父标签为空。两个状态使用不同的 Controller 。

我的设置有什么问题吗？

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;
}