I was wondering if there is an easy way to add a link/url to the top home state?

[josoroma-zz]

Hi!

I was wondering if there is an easy way to add a link/url to the top home state?

Right now my current breadcrumb behavior is: Home / SomeLabel / OtherLabel where Home is not clickable at all.

.config( function myAppConfig ( $stateProvider, $urlRouterProvider, $breadcrumbProvider) {
    $breadcrumbProvider.setOptions({
        prefixStateName: 'main',
        template: 'bootstrap3',
        includeAbstract : true
    });

    $stateProvider.state('main', {
        abstract: true,
        controller: 'MainCtrl',
        templateUrl: 'main/main.tpl.html',
        ncyBreadcrumb: {
            label: 'Home'
        }
    });

    $urlRouterProvider.otherwise( '/' );
})

Thanks in advance!

[mfrachet]

Where should this link redirects to ?

[nunof07]

Does anyone have a fix for this?

It's common for abstract states to have a default child state set with no URL, so clicking an abstract state would show it.

[nunof07]

To answer my own question you can do this with a custom template.

Example template (copied from the Bootstrap 3 template):

<ol class="breadcrumb">
    <li ng-repeat="step in steps" ng-class="{active: $last}" ng-switch="$last">
        <a ng-switch-when="false" href="{{step.ncyBreadcrumbLink}}">{{step.ncyBreadcrumbLabel}}</a>
        <span ng-switch-when="true">{{step.ncyBreadcrumbLabel}}</span>
    </li>
</ol>

The original template has an additional condition in the ng-switch for abstract states that I removed here.

And set the template in the config:

function breadcrumbsConfig($breadcrumbProvider) {
    'ngInject';
    $breadcrumbProvider.setOptions({
        includeAbstract: true,
        template: '... template string here ...'
    });
}

Note: This will render a link for ALL abstract states that are in the breadcrumb.