Currently, I am utilizing ui-router to handle the state management for the admin segment of a project. The admin area includes the ability to browse through various categories. In this category management module, I am working on implementing a breadcrumb link system.
One issue I am facing is that I am using a $scope variable to store the name of the presently selected subcategory (or breadcrumb), but it does not retain the new value. It seems to initially accept the new value, only to revert back to displaying the original "Top Level" category.
The subcategory is considered a child of the main category and it appears like this in the ui-router:
.state('admin.category', {
...
},
.state('admin.category.subcategory', {
...
},
In the category.html file ("0" denotes the top level of all categories)
<a ui-sref="admin.category.subcategory({categoryId: 0})" ng-click="breadCrumbManager(0)">View Categories</a>
<div ui-view></div>
For subcategory.html (where breadCrumbLinks fails to hold the updated value)
<div>
{{breadCrumbLinks}}
<ul>
<li ng-repeat="category in categories">
<a ui-sref="admin.category.subcategory({categoryId: category.id})" ng-click="breadCrumbManager(category.id)">{{category.title}}</a>
</li>
</ul>
<div ui-view></div>
In AdminController (where the switching of names occurs)
$scope.breadCrumbManager = function(categoryId) {
if (categoryId === 0)
{
console.log("top level");
$scope.breadCrumbLinks = "Top Level"; //keeps switching to this!
}
else
{
categoryService.getCategoryName(categoryId).then(function(link){
console.log(link);
$scope.breadCrumbLinks = link;
});
}
}
The newly assigned breadcrumb name registers correctly in the console, and there is no additional call to this function when the page loads. Hence, it's puzzling why it reverts back. There should be a log entry in the console if that were happening, but it's not there. Moreover, the category display mechanism works fine.
Furthermore, this function is accessed via ng-click, and each link has its distinct value. It's not as though I can click on two links simultaneously. This situation has me truly perplexed.
*** Edit ****
I have temporarily disabled the section that retrieves the category name. Presently, there is a simple if statement which logs the categoryId and where it originated from:
$scope.breadCrumbManager = function(categoryId) {
if (categoryId === 0)
{
$scope.breadCrumbLinks = "Top Level";
console.log(categoryId + " is top level");
}
else
{
$scope.breadCrumbLinks = "bottom Level";
console.log(categoryId + " is bottom level");
}
}
Nevertheless, it continues to exhibit "Top Level"!! If I manually replace 0 with an actual category id on the category.html page, then it displays "bottom level". This suggests that something might be related to calling the breadCrumbManager() function within the admin.category.subcategory route.
What could possibly be causing this? Unfortunately, I'm clueless. The function is being triggered, the data is correct, but Angular doesn't reflect the change in the variable. At this point, I am contemplating abandoning Angular until version 2.0 arrives. Around 80% of the challenges on this project revolve around deciphering angular oddities like this one.