AngularJS：更改状态时更改布尔变量

Question

对 angularjs 很陌生，正在研究如何解决这个问题。
我有这条路线：

name: "Tracker",
url: "/tracker/:period",

我有 3 个不同的状态，为此我创建了 3 个不同的函数，因此我可以在我的应用程序中从一个 url 切换到另一个。

 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;
  };  

所以 url 的更改没有问题，但我有一个问题，我声明了这 3 个 var：

viewWeek: boolean;
viewMonth: boolean;
viewYear: boolean;

在控制器中，因此我可以将它们与 ng-show 一起使用，以根据您所在的 URL 隐藏一些内容。

正如您在 3 个函数中看到的，我根据您所在的 url 分配 True。

我遇到的问题，这工作但不正确， 当我单击视图上的按钮让我们说更改为每月 url 时，新的 url 被加载，但是使用 viewMonth 变量的 ng-show 仅在第二次单击按钮后才有效。

所以我单击一次，更改 url，再次单击，使用该 bool 应用内容。 我认为解决方案应该很简单，可能是关于我如何初始化这些变量，有什么线索吗？

编辑1：这里是更改url的按钮：

<div class="pull-right" ng-click="vm.viewYearly()"><i>View Year</i></div>

编辑 2：

views: {
      header: {
        templateUrl: "Views/Tracker/Header.htm",           
        controller: "trackerHeadCtrl",
        controllerAs: "vm"

编辑 3
解决方案：

最后我是这样解决的，

viewYearly() { 
this.$state.go("Tracker", {"period": 'year'});

这是更改状态的函数，我没有声明 3 个布尔变量并更改它们，而是使用了一个函数：

get viewMonth(): boolean {
        return this.period === "year";
    };

还是谢谢你的回答！

Answer 1

问题是您正在更新 viewWeek、viewMonth、viewYear 角度之外的 $digest cirle。要快速修复您的代码，请将这些行包含在 $timeout() 或 $scope.$applyAsync() 中

Answer 2

你应该换一种方式来做：点击应该改变状态，状态会设置变量。使用状态作为您唯一的事实来源。

  viewYearly() { 
    this.$state.go("Tracker", {"period": 'year'});
  };

  viewMonthly() { 
    this.$state.go("Tracker", {"period": 'month'});
  };  

  viewWeekly() { 
    this.$state.go("Tracker", {"period": 'week'});
  };

  //then at activate
  function activate() {
    if ($state.params.period == 'year') {
      // set variables here
    }
  }