javascript - Angular : ng-show isn't evaluating expression continuously

Question

我使用一个名为 activeScope 的变量来维护状态并在两种形式之间切换。单击选项卡时，通过调用 changeScope 进行更新，此变量会更改值。

此更改已正确注册，可以在选项卡按钮的事件状态之间切换，但 div form0 和 form1 根本不切换。据我所知，我似乎没有正确使用 ng-show ，因为当 activeScope 的值发生变化时，表达式不会计算。

这是我的标签 -

<ul class="nav navbar-nav navbar-right" ng-controller="SearchScope as scope">
    <li ng-repeat="item in scopes" ng-class="{'active': isScopeActive({{$index}})}"><a href="" ng-click="changeScope($index)">{{item}}</a></li>
</ul> 

我有 div 的标记为 -

<div class="container main-form" ng-controller="SearchScope as scope">
    <div id="form0" ng-show="isScopeActive(0)" ng-controller="SingleIPController as sip">
    ...
    </div>
    <div id="form1" ng-show="isScopeActive(1)">
    ...
    </div>
</div>

Controller 代码 -

app.controller("SearchScope", function($scope) {
    $scope.activeScope = 0;
    $scope.scopes = ['Individual IP Data', 'All IP Data'];

    $scope.isScopeActive = function(index){
        if(index == $scope.activeScope){
            return true;
        } else {
            return false;
        }
    };

    $scope.changeScope = function(index){
        $scope.activeScope = index;
    };
});

app.controller("SingleIPController", function($scope, $http){
    ...
});

有人可以告诉我我对 ng-show 所做的事情是否错误以及解决此问题的正确方法吗？

Answer 1

是的，这不是 ng-show 的正确用法。这是一个工作演示 -> https://jsfiddle.net/agm7pmyw/1/

代码:

<div id="search-container" ng-controller="SearchScope">

  <ul class="nav navbar-nav navbar-right">
    <li ng-repeat="item in scopes" ng-class="{'active' : $index == activeScope}">
      <a href="" ng-click="changeScope($index)">{{item}}</a>
    </li>
  </ul>

  <div class="container main-form">
    <div id="form0" ng-show="activeScope == 0" ng-controller="SingleIPController as sip">
      Scope 1
    </div>
  </div>

  <div class="container main-form">
    <div id="form1" ng-show="activeScope == 1" ng-controller="SingleIPController as sip">
      Scope 2
    </div>
  </div>

</div>

脚本:

var app = angular.module('app', []);

app.controller("SearchScope", function($scope) {
  $scope.activeScope = 0;
  $scope.scopes = ['Individual IP Data', 'All IP Data'];

  $scope.isScopeActive = function(index) {
    if (index == $scope.activeScope) {
      return true;
    } else {
      return false;
    }
  };

  $scope.changeScope = function(index) {
    console.log('changing scope to ' + index);
    $scope.activeScope = index;
  };
});

app.controller("SingleIPController", function($scope, $http) {

});

CSS:

.active{
  color:red
}

我确实稍微改变了你的标记，你可以玩一下演示。

干杯!