I am still new to Angularjs and just started working on an app that has several "projects" each with a local menu displayed on specific pages. The main navbar with footer is located in the Index.html:
<body ng-app="ysi-app" ng-controller="MainController">
<div class="page-content">
<div class="row">
<div class="col-md-2">
<div class="sidebar content-box" style="display: block;">
<ul class="nav">
<!-- Main menu -->
<li ng-if="isAuthenticated()"><a href="#/">{{name}}</a></li>
<li class="current"><a href="index.html">Dashboard</a></li>
<li><a href="#/project">Projects</a></li>
</ul>
</div>
<div ng-if="isAuthenticated() && displayProjectMenu == true" ng-include="'views/localMenu.html'" ng-controller="LocalMenuController">
</div>
</div>
<div ng-view></div>
</div>
There is a nested controller called LocalMenuController for handling the local menu and a main controller. The project controller sets the data as follows:
angular.module('ProjectCtrl',[]).controller('ProjectController',function($scope,$location, ProjectService,$route, AuthenticationService, $rootScope){
$scope.setProjectDatas = function(projectName, projectId){
ProjectService.setName(projectName);
$rootScope.projectId = projectId;
};});
To ensure proper testing, I temporarily set the id of one project to the $rootScope, which can be accessed in the LocalMenuController:
angular.module('LocalMenuCtrl',[]).controller('LocalMenuController', function($scope, ProjectService, $rootScope) {
$scope.projectId = '';
$scope.projectId = $rootScope.projectId;
});
When displaying projects in a table, clicking on a particular project triggers the setProjectDatas(name,id) function. However, there seems to be an issue where the id of the previous project clicked remains when clicking on a new project. It appears that the data is not updating properly. Despite searching for solutions online, no relevant information was found.
It seems like the LocalMenuController is only being called once and not again.
Can anyone help me understand what may be going wrong here?
Thank you
UPDATE
I attempted to address this by creating a Directive, but it still does not update the partial view localMenu.
LocalMenu Directive:
angular.module('LocalMenuCtrl',[]).controller('LocalMenuController', function($scope, ProjectService, $rootScope) {
console.log('-> LocalMenu controller');
})
.directive('localMenu', function($rootScope){
return {
templateUrl: '/YSI-Dev/public/views/partials/localMenu.html',
link: function(scope){
scope.projectId = $rootScope.projectId;
}
};
});
A snippet from index.html
<div ng-if="isAuthenticated() && displayProjectMenu == true" ng-controller="LocalMenuController">
<div local-menu></div>
</div>
The content of Partial view localMenu :
<div class="sidebar content-box" style="display: block;">
<ul class="nav">
<li><a href="#/project/{{projectId}}"><i class="glyphicon glyphicon-list-alt"></i> Backlog</a></li>
<li><a href="#/project/{{projectId}}/members"><i class="glyphicon glyphicon-user"></i> My team </a></li>
</ul>
</div>
I am trying to retrieve the projectId from the $rootScope and insert it into the
<a href="#/project/{{projectId}}"