Closed OnkelTem closed 10 years ago
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
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
Here is the configuration:
module.config(function($breadcrumbProvider) { $breadcrumbProvider.setOptions({ prefixStateName: 'dashboard', // template: 'bootstrap3' templateUrl: 'bread/breadcrumb.tpl.html'
});
});
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 ;)
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.
Thanks Nicolas.
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'
});
});
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.
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
) ?
Nicolas, that's exactly the case with me as well. Thanks for the quick responses.
If I set my own template via $breadcrumbProvider.setOptions({ templateUrl: ... }) then steps are empty, as $rootScope.$on('$viewContentLoaded', function (event) { .. }) never triggered.