templateUrl doesn't work

[OnkelTem]

If I set my own template via $breadcrumbProvider.setOptions({ templateUrl: ... }) then steps are empty, as $rootScope.$on('$viewContentLoaded', function (event) { .. }) never triggered.

[ncuillery]

I couldn't reproduce this bug.

Everything works fine with this configuration:

app.js:

angular.module('ncy-sample')
  .config(function($breadcrumbProvider) {
    $breadcrumbProvider.setOptions({
      templateUrl: 'breadcrumb.html'
    });
  })

breadcrumb.html:

<table class="table">
    <tr ng-repeat="step in steps">
        <td>{{step.ncyBreadcrumbLink}}</td>
        <td>{{step.ncyBreadcrumbLabel}}</td>
    </tr>
</table>

Do you have any log in console ?

If not, can you give me more elements, like the entire state configuration or ideally, an relevant Plunker or Fiddle ?

AngularJS & UI-Router versions that you use can be useful too.

Thanks in advance

[puttaplay]

Thanks for the wonderful feature. I have the same issue as aneganov reported. I'm new to angular and cannot seem to figure out how to inject the 'steps' from scope into my breadcrumb.tpl.html that's the templateUrl. breadcrumb.tpl.html gets called but the steps variable empty and the breadcrumb is not appearing.

Here is my breadcrumb.tpl.html

'
1. {{step.ncyBreadcrumbLabel}}
2. {{step.ncyBreadcrumbLabel}}

Here is the configuration:

module.config(function($breadcrumbProvider) { $breadcrumbProvider.setOptions({ prefixStateName: 'dashboard', // template: 'bootstrap3' templateUrl: 'bread/breadcrumb.tpl.html'

});

});

[ncuillery]

Hi and welcome to Github ;)

The template file is actually the template of the directive. So the scope used by the template is the scope of the directive.

steps is a build-in variable which is already attached to this scope. The only thing you have to do is to use steps in your template. This var is automatically updated after each state change.

To debug your problem, please can you change the setOptions to:

module.config(function($breadcrumbProvider) {
    $breadcrumbProvider.setOptions({
        prefixStateName: 'dashboard',
        template: '<div>Number of states : {{steps.length}}</div>'
  //      templateUrl: 'bread/breadcrumb.tpl.html'
    });
});

and tell me what happened.

If it works, revert the change and copy

'<div>Number of states : {{steps.length}}</div>'

in your breadcrumb.tpl.html (and tell me what happened again).

Check also if you have errors in console (press F12).

PS: See this page to know how insert code block in Github messages ;)

[OnkelTem]

Sorry for the delay, here is the plunker with the test case:

http://plnkr.co/edit/TbT3nkvUzCvFzAE7gHWi?p=preview

If I don't set templateUrl, breadcrumbs are showing on the default page - root.home state. If I set templateUrl, then breadcrumbs are missing on the default page and appears only on root.home.section page.

[puttaplay]

Thanks Nicolas.

1. When I made the first change you suggested (copied below), it shows

Number of states : 1

module.config(function($breadcrumbProvider) {
    $breadcrumbProvider.setOptions({
        prefixStateName: 'dashboard',
        template: '<div>Number of states : {{steps.length}}</div>'
  //      templateUrl: 'bread/breadcrumb.tpl.html'
    });
});

1. When I followed your second suggestion, it shows:

Number of states :

So, the breadcrumb.tpl.html is linked, but the scope (and thus the steps variable) is not. What do I have to do to associate my breadcrumb.tpl.html to your directive?

There were no errors in the console.

Thanks again for the quick response.

[ncuillery]

It seems we have something serious here.

The problem occurs when the $breadcrumb needs to load a template file whereas the $state doesn't. The event $viewContentLoaded is emitted before the listener is defined in angular-breadcrumb's directive. That's why nothing happened during the first access of the application.

Thank to you @aneganov. It's much easier with a Plunker ;)

@puttaplay can U confirm you are in the same case? i.e: Is the first-accessed state configured with a template property (not templateUrl) ?

[puttaplay]

Nicolas, that's exactly the case with me as well. Thanks for the quick responses.