bread crumb link goes to wrong url

[ansorensen]

I'm using angular-breadcrumb with ui state router. I have anchor with ui-sref="app.page", which becomes href="/page", and it works perfectly, taking me to http://localhost/app/#/page. However, the breadcrumb for app.page only has href="/page", and it takes me to http://localhost/page, which 404s.

my state provider is

$stateProvider
  .('root', {
    'abstract': true,
    'views': {...}
  })
  .('app', {
    'abstract': true,
    parent: 'root',
    'views': {...},
    ncyBreadcrumb: {
      skip: true
   }
.('app.home', {
    url: '/',
    views: {...}
    ncyBreadcrumb: {
      label: 'Home'.
      parent: 'app'
    }
})
.('app.page', {
    url: '/page',
    views: {...}
    ncyBreadcrumb: {
      label: 'Page'.
      parent: 'app'
    }
})
.('child', {
    url: '/page/:childId',
    views: {...}
    ncyBreadcrumb: {
      label: '{{child.name}}'.
      parent: 'app.page'
    }
})

When I'm on the child page, and click the breadcrumb for app.page (which has the same href as the main nav), I end up at the wrong URL. It looks like what UI Router takes as '/' is the root of the angular app ('http:/localhost/app/#/') but whereas breadcrumb interprets '/' as 'http:/localhost'. The latter is not even in my app.

[ansorensen]

works if I insert a # into the template anchor's href

<a ng-switch-when="false" href="#{{step.ncyBreadcrumbLink}}">{{step.ncyBreadcrumbLabel}}</a> 

[migajek]

same here, the funny thing is ui-sref links are pointing to the same url yet they're working properly, I end up with a # prefix when using ui-sref.

breadcrumb: no hash, doesn't work (ends up on ":8080/campaign/" which is incorrect)

ui-sref: no hash, but it does work, ends up with ":8080/#campaign"

[ncuillery]

That's curious.

Please what is your version of

• angular
• ui-router
• angular-breadcrumb

[jondthompson]

The problem is that he's using hrefs in his links instead ui-srefs. I was just going to create an issue for this, but this'll do.

A touch more information. hrefs require a page reload to work, which if you don't have url rewriting setup will break url routing. ui-srefs don't require a reload, as it uses angular's normal route.

[ncuillery]

The values of hrefs are directly generated from the method $state.href(), the same used by the ui-sref directive.

@jondthompson I think you speak about the html5mode where hrefs don't include '#' and the whole application need url writing on the server side.

With html5mode disabled, navigation in AngularJS is based on anchors who don't need a reload with either href or ui-sref (the only purpose of this directive is to generated an url in a href attribute).

[migajek]

Angular 1.3.2 ui-router 0.2.11 latest breadcrumbs

both links have the exactly same href parameter ...

(breadcrumbs)

(ui-sref)

[ncuillery]

Please upgrade the ui-router to 0.2.12. There is a bug when using both Angular 1.3.2 and ui-router 0.2.11 (see https://github.com/angular-ui/ui-router/issues/1397).

@ansorensen do you use ui-router 0.2.11 too ?

[ansorensen]

Was using 0.2.11, just updated to 0.2.13 and my issue was resolved.

[jksenthilraja]

I updated my UI-router to 0.2.13 and my issue was resolved.