I currently have 2 controllers set up as follows:
app.controller('ParentMenuController',
function ($scope,MenuService) {
$scope.contentLoaded = false;
$scope.showButton = false;
$scope.showButton = MenuService.getStatus();
});
Second Controller:
app.controller('ChildMenuController',
function ($scope,MenuService) {
MenuService.setStatus(true);
});
Service Utilized:
app.factory('MenuService', function ($q,$http) {
var status= false;
var setStatus=function(newObj){
status=newObj;
};
var getStatus=function(){
return status;
};
return {
getStatus:getStatus,
setStatus:setStatus
};
});
The issue I am facing is that the line of code below is not functioning as expected, resulting in the status always remaining false.
$scope.showButton = MenuService.getStatus();
Although I can trigger the event on button click or user action, my goal is for the button to be invisible during page load. Once the ChildMenu controller executes, the parent controller's button should become visible. I prefer not to use $broadcast, as it requires $rootscope.
Please note: Both controllers and html files are quite extensive. Only relevant portions have been included here. The childMenuController (childMenu.html) has its own html file, while the ParentMenuController (parentMenu.html) also has a separate html file. Both html files are used as directives within the main index.html file.