Trying to implement ng-show for navigation by toggling div tags based on page
Successfully implemented functionality but struggling to trigger "pageChange()" from different controllers
After researching, discovered the concept of services
Now have a service storing the page variable that can be modified by other controllers
Issue is the page variable resets to its initial value and unsure how to rectify this
service:
app.service('navigationService', function() {
var pa = this; //pa representing parent
this.page;
this.changePage = function(p){
// p is the new page
pa.page = p
console.log(pa.page);
};
});
NavigationController:
app.controller("navCon", ["$scope", "navigationService", function($scope, navigationService){
var conNav = this;
this.page = navigationService.page;
navigationService.changePage("login"); //initializing the service page variable as "login" also fails
this.digest = function(){//perform action whenever a digest cycle runs
console.log(conNav.page);
}
}]);
Upon running the page, the log displays:
login
undefined
undefined
undefined
The section where the page is shown/hidden and the 'digest' function is invoked:
<div class="container-fluid" ng-show="{{nav.page == 'home'}}">
<div class="row" ng-class="{'go':nav.digest()}"><!--go used to trigger a function with each digest-->
New to Angular and unsure what's causing the 'undefined' page issue after the first log. Any guidance on resolving this would be greatly appreciated.
Thank you in advance