Just getting started with AngularJS and trying to figure out how to tackle this issue.
I have set up the following route:
name: "Tracker",
url: "/tracker/:period",
and I have 3 distinct states for which I've created 3 separate functions to facilitate switching between URLs in my application.
viewYearly() {
this.$state.go("Tracker", {"period": 'year'});
this.viewWeek = false;
this.viewMonth = false;
this.viewYear = true;
};
viewMonthly() {
this.$state.go("Tracker", {"period": 'month'});
this.viewWeek = false;
this.viewMonth = true;
this.viewYear = false;
};
viewWeekly() {
this.$state.go("Tracker", {"period": 'week'});
this.viewWeek = true;
this.viewMonth = false;
this.viewYear = false;
};
While the URL change works smoothly, I'm encountering an issue. I've declared these 3 variables:
viewWeek: boolean;
viewMonth: boolean;
viewYear: boolean;
in the controller so that I can use them with ng-show to hide certain content based on the URL being viewed.
As demonstrated in the functions, I assign True depending on the URL accessed.
The problem lies in the fact that it's functioning but not accurately - when I click a button in my view to switch to a Monthly URL, the new URL loads, BUT the ng-show utilizing the viewMonth variable only takes effect after a SECOND click of the button.
So, upon first click, the URL changes; on the second click, the corresponding actions are triggered using that boolean. I believe the solution might be simple, potentially related to how I initialized those variables. Any suggestions?
Edit 1: here is the button to alter the URL:
<div class="pull-right" ng-click="vm.viewYearly()"><i>View Year</i></div>
Edit 2:
views: {
header: {
templateUrl: "Views/Tracker/Header.htm",
controller: "trackerHeadCtrl",
controllerAs: "vm"
Edit 3
SOLUTION:
I managed to resolve it by making the following adjustment,
viewYearly() {
this.$state.go("Tracker", {"period": 'year'});
this function handles the state change, and instead of declaring and toggling 3 boolean variables, I utilized a function:
get viewMonth(): boolean {
return this.period === "year";
};
Appreciate your guidance regardless!