Dynamic breadcrumb labels are empty on page reload

[swichers]

I have a page that lists locations with the ability to click on a location to see details. The breadcrumbs work fine when clicking on an item from the list (Home > Locations > State > City > Location name).

The problem is if you're on a location detail page and reload the page in your browser then the dynamic labels in the breadcrumb are empty (Home > Locations > > >). The details page displays fine otherwise

There is a common on another issue mentioning this same problem. https://github.com/ncuillery/angular-breadcrumb/issues/107#issuecomment-143161637

      .state('app.locations.detail', {
        url: '/:id',
        views: {
          'content@': {
            controller: 'LocationDisplayController',
            templateUrl: '/app/location/html/location-detail.html',
          }
        },
        ncyBreadcrumb: {
          label: '{{location.name}}',
          parent: 'app.locations.city'
        },
      });

Note: the problem is still there even if I simplify the breadcrumbs so that location names immediately follow the default app state.

If I change the label to Testing {{location.name}} then you will see Home > Locations > > > Testing.

[ismailatkurt]

I got the same issue. I'm not so good at angular just a beginner but I searched component codes slightly. Maybe the reason is behind a few lines of those codes:

var parseLabel = $interpolate(step.ncyBreadcrumb.label);
step.ncyBreadcrumbLabel = step.ncyBreadcrumb.label;

Can any expert examine those lines please?

[ismailatkurt]

If you use $rootScope instead of $scope at controller it will work. But i'm not sure its the right way?

  $rootScope.foo = 'test';

will be work perfect at:

ncyBreadcrumb: {
    label: '{{foo}}',
    parent: 'myparent'
},

[maxoizs]

I hacked this by adding a scope variable to the breadcrump called it pageLabel and at the template I evaluate pageLabel || step.ncyBreadcrumbLabel Then I'll pass it from the current page, but it only works for the current page and that's fine with me

[nbasov]

Here is an old issue about this problem https://github.com/ncuillery/angular-breadcrumb/issues/42 Solved by injecting $breadcrumb into application .run method.

[xuhcc]

@nbasov Thanks, it helped.

[iveretelnyk]

2017 and still getting empty labels on page reload. I'd help, but don't know how.

[eyal-magnetic]

@iveretelnyk see @nbasov 's comment above. Inject $breadcumb service into the run method of your module.

[iveretelnyk]

@eyal-magnetic I tried, in my case it did not help.