Угловое: ng-show не оценивает выражение непрерывно

Question

Я использую переменную под названием activeScope для поддержания состояния и переключения между двумя формами. Эта переменная изменяет значение при нажатии на вкладку путем вызова changeScope для обновления.

Это изменение зарегистрировано правильно для переключения между активными состояниями кнопок вкладок, но divs 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> 

код контроллера -

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

Решенный путем подхода, аналогичного подходу codepen. Это похоже на то, что я хотел достичь - шаблон Master-Detail.

Markup -

<div class="container" ng-app="tabApp"> 
    <div class="row" ng-controller="TabController"> 
     <div class="col-md-2"> 
      <ul class="nav nav-pills nav-stacked"> 
      <li ng-class="{ active: isSet(1) }"> 
       <a href ng-click="setTab(1)">Home</a> 
      </li> 
      <li ng-class="{ active: isSet(2) }"> 
       <a href ng-click="setTab(2)">Profile</a> 
      </li> 
      <li ng-class="{ active: isSet(3) }"> 
       <a href ng-click="setTab(3)">Messages</a> 
      </li> 
      </ul> 
     </div> 
     <div class="col-md-8"> 
      <div class="jumbotron"> 
      <div ng-show="isSet(1)"> 
       <h1>Home page</h1> 
       <p>Welcome to the website!</p> 
       <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p> 
       </div> 
       <div ng-show="isSet(2)"> 
      <h1>Profile page</h1> 
      <p>Profile information</p> 
      </div> 
      <div ng-show="isSet(3)"> 
      <h1>Messages</h1> 
      <p> Some messages </p> 
      </div> 
     </div> 
    </div> 
</div> 

Controller -

angular.module('tabApp', []) 
.controller('TabController', ['$scope', function($scope) { 
    $scope.tab = 1; 

    $scope.setTab = function(newTab){ 
     $scope.tab = newTab; 
    }; 

    $scope.isSet = function(tabNum){ 
     return $scope.tab === tabNum; 
    }; 
}]); 

CSS -

@import "compass/css3"; 

body { 
margin: 15px; 
} 

/* text recolor */ 
h1, p, a { 
color: #4DC9C9 !important; 
} 

/* button recolor */ 
.nav-pills > li.active > a, .btn-primary { 
background-color: #6C6C6C !important; 
// feeling like it's a rounded corners kind of day 
border-color: #6C6C6C !important; 
border-radius: 25px; 
} 

Answer 2

ng-show не вызывает функцию, а сам оценивает выражение. Следовательно, измените свой код соответствующим образом.

В контроллере создается логическая переменная, которая отслеживает выбранный тип (0 => false, 1 => true). Внутри вашего просмотра, проверьте это vvariable, используя ng-show, чтобы показать или скрыть форму соответственно.

Controller Код:

$scope.showForm1 = false; 
$scope.changeScope = function(index){ 
    if(index == 0) 
     $scope.showForm1 = false; 
    else 
     $scope.showForm1 = true; 
}; 

На ваш взгляд:

<div class="container main-form" ng-controller="SearchScope as scope"> 
<div id="form0" ng-show="!showForm1" ng-controller="SingleIPController as sip"> 
... 
    </div> 
</div> 

<div class="container main-form" ng-controller="SearchScope as scope"> 
    <div id="form1" ng-show="showForm1" ng-controller="SingleIPController as sip"> 
... 
    </div> 
</div> 

Answer 3

да это не совсем верно использование нг-шоу. Вот рабочая демо ->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 
} 

я изменить разметка немного, вы можете играть с демо.

Cheers!