分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何使用AngularJS + Angular UI Router制作自动动态面包屑，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何使用AngularJS + Angular UI Router制作自动动态面包屑？

开发过程中遇到如何使用AngularJS + Angular UI Router制作自动动态面包屑的问题如何解决？下面主要结合日常开发的经验，给出你关于如何使用AngularJS + Angular UI Router制作自动动态面包屑的解决方法建议，希望对你解决如何使用AngularJS + Angular UI Router制作自动动态面包屑有所启发或帮助；

我确实自己解决了一段时间，因为没有可用的东西。我决定不使用该data对象，因为我们实际上不希望面包屑标题由孩子继承。有时会有模态对话框和右侧面板滑入，从技术上讲是“儿童视图”，但它们不应影响面包屑。通过使用breadcrumb对象，我们可以避免自动继承。

对于实际title属性，我正在使用$interpolate。我们可以将面包屑数据与解析范围合并，而不必在其他地方进行解析。在我遇到的所有情况下，我都只想使用resolve作用域，因此效果很好。

我的解决方案也可以处理i18n。

$stateProvIDer
    .state('courses', {
        url: '/courses',
        template: Templates.vIEwsContainer(),
        controller: function(Translation) {
            Translation.load('courses');
        },
        breadcrumb: {
            title: 'COURSEs.title'
        }
    })
    .state('courses.List', {
        url: "/List",
        templateUrl: 'app/courses/courses.List.HTML',
        resolve: {
            coursesData: function(Model) {
                return Model.getAll('/courses');
            }
        },
        controller: 'CoursesController'
    })
    // this child is just a slIDe-out vIEw to add/edit the SELEcted course.
    // It should not add to the breadcrumb - it's technically the same screen.
    .state('courses.List.edit', {
        url: "/:coursEID/edit",
        templateUrl: 'app/courses/courses.List.edit.HTML',
        resolve: {
            course: function(Model, $stateParams) {
                return Model.getone("/courses", $stateParams.coursEID);
            }
        },
        controller: 'CourseFormController'
    })
    // this is a brand new screen, so it should change the breadcrumb
    .state('courses.detail', {
        url: '/:coursEID',
        templateUrl: 'app/courses/courses.detail.HTML',
        controller: 'CourseDetailController',
        resolve: {
            course: function(Model, $stateParams) {
                return Model.getone('/courses', $stateParams.coursEID);
            }
        },
        breadcrumb: {
            title: '{{Course.namE}}'
        }
    })
    // lots more screens.

我不想将面包屑绑定到指令，因为我认为在我的应用程序中可能有多种方式直观显示面包屑。因此，我将其投入了服务：

.factory("Breadcrumbs", function($state, $translate, $interpolatE) {
    var List = [], title;

    function getProperty(object, path) {
        function index(obj, i) {
            return obj[i];
        }

        return path.split('.').reduce(index, object);
    }

    function addBreadcrumb(title, statE) {
        List.push({
            title: title,
            state: state
        });
    }

    function generateBreadcrumbs(statE) {
        if(angular.isdefined(state.parent)) {
            generateBreadcrumbs(state.parent);
        }

        if(angular.isdefined(state.breadcrumb)) {
            if(angular.isdefined(state.breadcrumb.titlE)) {
                addBreadcrumb($interpolate(state.breadcrumb.titlE)(state.locals.globals), state.Name);
            }
        }
    }

    function appendtitle(translation, indeX) {
        var title = translation;

        if(index < List.length - 1) {
            title += ' > ';
        }

        return title;
    }

    function generatetitle() {
        title = '';

        angular.forEach(List, function(breadcrumb, indeX) {
            $translate(breadcrumb.titlE).then(
                function(translation) {
                    title += appendtitle(translation, indeX);
                }, function(translation) {
                    title += appendtitle(translation, indeX);
                }
            );
        });
    }

    return {
        generate: function() {
            List = [];

            generateBreadcrumbs($state.$current);
            generatetitle();
        },

        title: function() {
            return title;
        },

        List: function() {
            return List;
        }
    };
})

实际的面包屑指令变得非常简单：

.directive("breadcrumbs", function() {
    return {
        reStrict: 'E',
        replace: true,
        priority: 100,
        templateUrl: 'common/directives/breadcrumbs/breadcrumbs.HTML'
    };
});

和模板：

<h2 translate-cloak>
    <ul class="breadcrumbs">
        <li ng-repeat="breadcrumb in Breadcrumbs.List()">
            <a ng-if="breadcrumb.state && !$last" ui-sref="{{Breadcrumb.statE}}">{{Breadcrumb.title | translatE}}</a>
            <span class="active" ng-show="$last">{{Breadcrumb.title | translatE}}</span>
            <span ng-hIDe="$last" class="divIDer"></span>
        </li>
    </ul>
</h2>