javascript - AngularJS:更改状态时更改 bool 变量

Question

对 angularjs 相当陌生，正在寻找如何解决这个问题。
我有这条路线:

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

我有 3 个不同的状态，为此我创建了 3 个不同的函数，这样我就可以在我的应用程序中从一个 URL 交换到另一个 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 个变量:

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

在 Controller 中，这样我就可以将它们与 ng-show 一起使用来隐藏一些内容，具体取决于您所在的 URL。

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

我遇到的问题是，它可以工作，但不正确， 当我单击 View 上的按钮以更改为每月 url 时，新的 url 会被加载，但是使用 viewMonth 变量的 ng-show 仅在第二次单击按钮后才起作用。

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

编辑1:这里是更改网址的按钮:

<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 个 bool 变量并更改它们，而是使用了一个函数:

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

无论如何，谢谢您的回答!

Answer 1

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

内