Question

对angularjs很新，看看如何解决这个问题我有这条路线：

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

我有3种不同的状态，我为此制作了3种不同的功能，因此我可以将我的应用从一个网址交换到另一个网址。

 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。

我遇到的问题，这是有效但不正确，当我点击我视图上的按钮让我们说更改为每月网址时，新网址会被加载，但是使用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

问题是您要在角度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
    }
  }

AngularJS：更改状态时更改bool变量

2 个答案: