ncuillery / angular-breadcrumb

Generate a breadcrumb from ui-router's states
http://ncuillery.github.io/angular-breadcrumb/
MIT License
786 stars 183 forks source link

Title tag with full state chain #71

Closed tradiff closed 9 years ago

tradiff commented 9 years ago

It would be nice to have a directive which we can use with a title tag, to put the full state chain into the page title. Something like ncy-breadcrumb-last, except it shows the entire state chain separated by a separator string.

Right now, I'm getting by with a custom bit of code:

    <title ng-bind="'MyApp: ' + titleTag">MyApp</title>
        $rootScope.$on('$viewContentLoaded', function () {
            BuildTitleTag();
        });

        function BuildTitleTag()
        {
            var viewScope = $breadcrumb.$getLastViewScope();
            var steps = $breadcrumb.getStatesChain();
            var combinedLabel = '';
            angular.forEach(steps, function (step) {
                if (step.ncyBreadcrumb && step.ncyBreadcrumb.label) {
                    var parseLabel = $interpolate(step.ncyBreadcrumb.label);
                    combinedLabel += " / " + parseLabel(viewScope);
                } else {
                    combinedLabel += " / " + step.name;
                }
            });

            if (combinedLabel.length > 3) {
                combinedLabel = combinedLabel.substring(3);
            }

            $rootScope.titleTag = combinedLabel;
        }
adamalbrecht commented 9 years ago

+1

Most of the time, my last breadcrumb is something like "Edit" or "Details", which isn't all that helpful in the title tag.

ncuillery commented 9 years ago

:+1:

We can add a new directive (ncyBreadcrumbText) rendering the state chain as plain text.

The separator (default: /) must be a directive option. Usage could be: <title ncy-breadcrumb-text=">"></title>

tradiff commented 9 years ago

@ncuillery I'm working on a pr for this. What about a site prefix or suffix in the title tag? Do you have any preferred syntax for how the site prefix or suffix gets specified in this custom directive? examples: Sample App: Home / Sample / Rooms / Room 101 or Home / Sample / Rooms / Room 101 - Sample App

tradiff commented 9 years ago

Suggested syntax: <title ncy-breadcrumb-text="Sample app: {{ncyBreadcrumbLabel}}" ncy-breadcrumb-text-separator=">"></title>

ncuillery commented 9 years ago

I'm ok for allowing customization of the template. Thanks for the PR, I'll review it very soon !