In-depth Inquiry
I have a specific setup with a header view and a main view in my Angular application. The goal is to include a "back" button in the header that should only be visible based on the current page I'm viewing.
Actions Taken
In my app.js file, I created a snippet as follows:
app.factory('globalServices', function() {
return {
showBack : false,
back: function() {
window.history.back();
}
};
});
For the header.html file, here's a snippet:
<a class="button-prev" ng-click="back()" ng-show="showBackButton">
Back
</a>
In the headerCtrl.js file, I included these snippets:
$scope.showBackButton = globalServices.showBack;
$scope.back = function() {
globalServices.back();
};
And for subPageCtrl.js, this snippet was added:
globalServices.showBack = true;
Hurdle Encountered
The visibility of the button does not update immediately after the value changes. It only reflects the change once I navigate to another page.
Is there a solution to rectify this issue?
If anyone has alternative approaches in mind, feel free to share.
Additional Note
An attempt to resolve the problem by calling $scope.$apply(); resulted in an error stating $digest already in progress, likely due to changing the value within the constructor of subPageCtrl.