第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定

很神奇!用angularjs 實現(xiàn)的一個面包屑指令~

標簽:
AngularJS

一个指令实现的面包屑效果:
图片描述
使用方法:直接在需要显示面包屑的地方使用此指令

<breadcrumbs class="breadcrumbs"></breadcrumbs>

状态属性需要配置ncyBreadcrumb对象:如下

                .state("home.main",{
                    url:'',
                    views: {
                        "":{
                            templateUrl: 'view/page/home.main.html',
                            controller:function(){}
                        },
                        "loginUser":{
                            templateUrl: 'view/page/home.userLogin.html',
                            controller:function($scope,loginService,$rootScope){}
                        }
                    },
                    ncyBreadcrumb:{
                        label:"首页"
                    }
                })
                .state("home.search",{
                    url:'/search/:searchKey',
                    templateUrl: 'view/page/home.search.html',
                    controller:function($scope,$stateParams){
                    },
                    ncyBreadcrumb:{
                        label:"全部结果",
                        parent:"home.main",
                        param:"searchKey"
                    }
                })

指令具体实现代码如下:

angular.module('breadcrumbsMd', ["ui.router"])
    .directive('breadcrumbs', function factory($rootScope, $state, $stateParams, $interpolate) {
        return {
            restrict: 'AE',
            replace: true,
            template: '<ol class="breadcrumb">' +
            '<li ng-repeat="step in steps" ng-class="{active:$last}" ng-switch="$last">' +
            '<a ng-switch-when="false" ui-sref="{{step.link}}">{{step.label}}</a>' +
            '<span ng-switch-when="true">{{step.label}}</span>' +
            '</li></ol>',
            scope: {},
            link: function (scope) {
                scope.$on('$stateChangeSuccess',
                    function () {
                        scope.steps = updateBreadcrumbs();
                    });
            }

        };
        //更新当前的面包屑
        function updateBreadcrumbs() {
            var breadcrumbs = [];
            for (var curState = $state.$current.name; curState; curState = breadcrumbParentState(curState))
            {
                generateBreadcrumbs(breadcrumbs, curState);
            }
            return breadcrumbs.reverse();
        }
        //生成面包屑
        function generateBreadcrumbs(chain, stateName) {
            var skip = false;
            var displayName, breadcrumbLabel;
            //如果状态已经存在状态链中,直接返回
            for (var i = 0; i < chain.length; i++) {
                if (chain[i].name === stateName) {
                    return;
                }
            }
            var state = $state.get(stateName);
            if (state.ncyBreadcrumb && state.ncyBreadcrumb.label)
            {
                breadcrumbLabel = state.ncyBreadcrumb.label;
                displayName = $interpolate(breadcrumbLabel)($rootScope);
            } else {
                displayName = state.name;
            }
            if (state.ncyBreadcrumb) {
                if (state.ncyBreadcrumb.skip) {
                    skip = true;
                }
            }
            if (!state.abstract && !skip) {//如果当前状态不是抽象的,并且skip为false
                //需要显示参数的面包屑
                if (state.ncyBreadcrumb && state.ncyBreadcrumb.param) {
                    chain.push({
                        link: stateName,
                        label: $stateParams[state.ncyBreadcrumb.param],
                        abstract: false
                    });
                }
                chain.push({
                    link: stateName,
                    label: displayName,
                    abstract: false
                });
            }
        }
        //返回当前状态或者当前状态的父状态
        function breadcrumbParentState(stateName) {
            var curState = $state.get(stateName);
            if (curState.abstract)return;
            //如果状态配置了面包屑对象,并且配置了parent属性
            if (curState.ncyBreadcrumb && curState.ncyBreadcrumb.parent) {
                var isFunction = typeof curState.ncyBreadcrumb.parent === 'function';
                //判断父状态的配置属性是否是函数
                var parentStateRef = isFunction ? curState.ncyBreadcrumb.parent($rootScope) : curState.ncyBreadcrumb.parent;
                if (parentStateRef) {
                    return parentStateRef;
                }
            }
            //返回当前状态的父状态
            var parent = curState.parent  (/^(.+)\.[^.]+$/.exec(curState.name)  [])[1];
            var isObjectParent = typeof parent === "object";
            return isObjectParent ? parent.name : parent;
        }
    })
點擊查看更多內容
11人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優(yōu)質文章

正在加載中
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優(yōu)惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消