Angular ui-router ng-if текущее точное состояние

В основном возникают проблемы с управлением моим родительско-дочерним состоянием, поскольку я новичок в ui-router. Однако я провел исследование и наткнулся на решения, которые требуют жесткого кодирования маршрутов, но не являются динамическими.

Что у меня сейчас есть:

<div> <!-- parent state -->
    <div ng-if="'.' | isState">
        <!-- 
          background hierarchy that should be visible only when
          parent state is active and not a child state of the parent
        -->
    </div>
    <nav>
        <a ui-sref="." ui-sref-active="active">Parent</a>
        <a ui-sref=".child1" ui-sref-active="active">Child 1</a>
        <a ui-sref=".child2" ui-sref-active="active">Child 2</a>
    </nav>
    <div ui-view></div>
</div>

Чего я пытаюсь достичь? Когда родитель загружается, я хочу, чтобы фон что-то показывал. Занимает весь экран. ui-view не займет весь экран. Таким образом, я хочу, чтобы фоновый элемент был скрыт или удален, когда маршрут не точно соответствует родительскому состоянию (если родительский маршрут равен /root/parent, я хочу, чтобы фон был виден только тогда, когда состояние точно /root/parent, а не /root/parent/child1).

Я могу достичь того, чего хочу, только если предоставлю точный ожидаемый маршрут. Например ng-if="'root.parent' | isState".

Кроме того, ui-sref-active="active" сохраняет active класс, когда отображаются дочерние представления (это ожидается, но я хочу, чтобы класс был активен только тогда, когда маршрут точно совпадает).

Тем не менее, я не считаю целесообразным жестко запрограммировать маршрут родительского объекта в поле зрения. Я просто хочу, чтобы он соответствовал тому маршруту, к которому он принадлежит. Таким образом, если я позже решу переместить его в /root/parent/car, мне не придется обновлять ng-if и ui-sref-active, чтобы отразить это изменение.

Кто-нибудь сталкивался с проблемой и смог ее решить?


parent-child angularjs nested-routes angular-ui-router
person DraganTL    schedule 23.03.2017    source источник
comment
В чем причина того, что у вас иерархия родитель-потомок?   -  person arqam    schedule 23.03.2017
comment
удалить класс active из дочерних маршрутов <a ui-sref=".child1">Child 1</a> и добавить css в класс active, чтобы он отображался только в фоновом режиме.   -  person Sravan    schedule 23.03.2017
comment
@arqam Основное содержимое страницы фактически отображается как фон, а дочерние элементы содержат необязательный контент, который можно скрыть.   -  person DraganTL    schedule 23.03.2017

Ответы (4)


arrow_upward
3
arrow_downward

Используйте $state.current.name для вашего состояния

<div ng-if="$state.current.name === 'state1'">

</div>
person Abdullah Al Noman    schedule 23.03.2017
comment
Убедитесь, что название штата не заключено в кавычки. как ng-if="$state.current.name === 'state1'", должно быть как ng-if="$state.current.name === state1" - person Kishor Pawar; 31.10.2018

arrow_upward
1
arrow_downward

Спасибо за ответы, но одним из условий решения, которое я искал, было попытаться избежать жесткого кодирования состояния. Мое решение таково:

Для навигационных ссылок мне пришлось прочитать код директивы ui-router, чтобы найти директиву ui-sref-active-eq, которую я применил следующим образом:

<nav>
    <a ui-sref="." ui-sref-active-eq="active">Parent</a>
    <a ui-sref=".child1" ui-sref-active="active">Child 1</a>
    <a ui-sref=".child2" ui-sref-active="active">Child 2</a>
</nav>

Директива гарантирует, что ссылка Parent активна только тогда, когда URL-адрес в точности совпадает с URL-адресом родительского объекта.

Что касается отображения / скрытия фона, у меня есть следующий код. Опять же, обратите внимание, что ни в том, ни в другом случае я не кодирую имя состояния жестко:

function ParentController ($scope, $state, $stateParams, $q) {
    var model = this;
    var controllerState = $state.current.name;

    $scope.showBackground = true;

    $scope.$on('$stateChangeSuccess', onStateChange);

    init();

    function init () {
        onStateChange();
    }

    function onStateChange() {
        $scope.showBackground = $state.is(controllerState);
    }
}

А затем в представлении:

<div ng-if="showBackground">
    <!-- 
      background hierarchy that should be visible only when
      parent state is active and not a child state of the parent
    -->
</div>
person DraganTL    schedule 23.03.2017

arrow_upward
0
arrow_downward

Этого можно добиться несколькими способами, например, у вас может быть parentController отдельный файл.

Вы можете проверить состояние в контроллере и предотвратить его отображение с помощью ng-if

Контроллер:

app.controller('myCtrl', function($scope,$state) {
     if($state.current.name == 'your parentstate')
        {
          $scope.stateName = true;
        }
     else
        {
          $scope.stateName = false;
        }

});

Просмотр:

<div ng-if="stateName">
  // this only executes if current stateName is parent state
</div>

Вышеупомянутое выполняется, только если текущее stateName является родительским состоянием

Or,

Вы можете просто удалить active class из дочерних маршрутов,

 <a ui-sref=".child1">Child 1</a> 
 <a ui-sref=".child2">Child 2</a>

Теперь добавьте CSS в активный класс, чтобы он отображался только в фоновом режиме для родительского класса.

person Sravan    schedule 23.03.2017
comment
@DraganTL, проверьте мой ответ. - person Sravan; 23.03.2017
comment
Извините, это не касается одной части OP, где я не хочу жестко кодировать состояние (собственное или родительское). Я решил проблему только сейчас и опубликую свое решение. - person DraganTL; 23.03.2017

arrow_upward
0
arrow_downward

Самое простое решение - проверить состояние в контроллере и сделать то, что вам нужно.

app.controller('appCtrl', function($scope, $state) {
    if ($state.is('my-active-state')) {
        // do stuff when the state is active
    } else {
        // do stuff when the state is NOT active
    }
});

Проверьте Документы, чтобы получить дополнительную информацию.

person Ferie    schedule 30.11.2017