Not getting breadcrumb name in view - angularjs

Question

<td><i class="dataentry-breadcrumb" /></td>
<!-- {{breadcrumb.length}} {{breadcrumb[0].nodeName}} -->
<td ng-repeat="breadCrumbObj in breadcrumb">
<i class="dataentry-breadcrumbArrow" />
<a class="dataentry-breadcrumbElement" href='#'
title="{{breadCrumbObj.nodeName}}"
ng-click=updateBreadCrumb(breadCrumbObj.level)>{{breadCrumbObj.nodeName}}</a>
</td>
In the above code, nodeName in anchor tag is not getting display in UI. But it is present in the array.I tried to print it and commented. It was showing nodeName. But not in anchor tag. Please anyone help me...

Answer 1

I will show how I did it, as it seemed more logical and more apstracted so you can have better control of the views you are displaying.
First of all, you place it in the basic html file where it is displayed. Something like this:
<div ncy-breadcrumb></div>
Now this allows you to create a independent element for a breadcrumb, so now we have basically a custom directive for it, and within breadcrumb.html you model it with something like this, again mostly html.
<div class="breadcrumb">
<span ng-repeat="step in steps | limitTo:(steps.length-1)">
<a class="btn btn-tab" href="{{step.ncyBreadcrumbLink}}">{{step.ncyBreadcrumbLabel}}</a>
<span class="btn btn-tab btn-tab-divider">></span>
</span>
<span ng-repeat="step in steps | limitTo:-1">
<span class="btn btn-tab btn-current">{{step.ncyBreadcrumbLabel}}</span>
</span>
</div>
So now that you have some layout in the breadcrumb, you call it from the state controller where you control the views of your app. You first set it up as dependency.
'$breadcrumbProvider', function($breadcrumbProvider, ..) {
configure it within the function
// configure breadcrump
$breadcrumbProvider.setOptions({
templateUrl: 'scripts/nav/breadcrump.html'
});
and than all there is left to do, name how you call it depending on where you are in the app. Like this:
.state('root.vacancy', {
url: '/vacancies/:id',
shouldHighlight: 'home',
views: {
'main-content#root': {
templateUrl: 'scripts/vacancies/vacancy.html',
controller: 'VacancyController',
resolve: {
vacancy: function(vacancyService, $stateParams) {
return vacancyService.getVacancy($stateParams.id);
}
}
}
},
ncyBreadcrumb: {
label: "{{newProfile.vacancyTitle}}",
parent: 'root.home'
}
})
You set the state for routing for each state you have in the app. This way a solid amount of modular architecture is incorporated, and your breadcrumb is superbly independent :)
Hope it helps.