Скрыть элемент, если он не находится в соответствующем состоянии

Question

У меня есть состояние Пользователь, где я показываю список пользователей и подстанцию ​​user.info, где я показываю информацию одного выбранного пользователя во вложенном виде. Когда я показываю информацию, я хочу скрыть список пользователей. Можно ли сделать что-то вроде:

<div ng-show="currentstate==/users/">list of user ...</div> 

Answer 1

Вы можете использовать ng-hide и ng-show, чтобы показать/скрыть список пользователей и информации пользователя в зависимости от состояния выбранного пользователя.

См пример кода ниже:

<div ng-hide="selectedUser"> 
    <ul> 
     <li ng-repeat="user in users" ng-click="selectedUser = user">{{user}}</li> 
    </ul> 
</div> 

<div ng-show="selectedUser">{{selectedUser}}</div> 

док на ng-hide и ng-show:

• https://docs.angularjs.org/api/ng/directive/ngHide
• https://docs.angularjs.org/api/ng/directive/ngShow

Answer 2

Это ответ на ваш пример:

У меня есть следующий код в моем методе app.run, он устанавливает текущее и предыдущее состояние на $ rootScope, а также печатает эту информацию на консоли.

 // State-Info 
     $rootScope.previousState = null; 
     $rootScope.currentState = null; 
     $rootScope.fromParams = null; 
     $rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from) { 
      $rootScope.previousState = from.name; 
      $rootScope.currentState = to.name; 
      $rootScope.currentStateClass = $rootScope.currentState.split('.').join('-'); 
      $rootScope.fromParams = to.fromParams; 
      var nAgt = navigator.userAgent; 
      // Do not print version @ Unit-Tests 
      if (nAgt.indexOf('PhantomJS') === -1) { 
       $log.debug('%c- - - - - - - - - - - - - ', 'color: blue; font-size: 14px'); 
       $log.info('Previous state:' + $rootScope.previousState); 
       $log.info('Current state:' + $rootScope.currentState + ' with body-class: ' + $rootScope.currentStateClass); 
       $log.debug('%c- - - - - - - - - - - - - ', 'color: blue; font-size: 14px'); 
      } 

в вашем HTML, то вы можете использовать нг скрыть нг-шоу или нг-если скрыть/показать/добавить/удалить его. Пример:

<li ng-if="$root.currentState === 'main.login'"> 

Как вы видите, в первом примере, я также имеющий currentStateClass, который преобразует точки в «-». В директиве я использую это, чтобы добавить его в тело, поэтому я также могу реагировать на определенные состояния, в частности, через css/scss.

Что касается вашей проблемы:

Почему вы не используете в другое состояние, листинг и состояние подробно? Если да, то как вы даже получаете список в обоих состояниях (при использовании разных шаблонов)?