Пользовательский интерфейс AngularJs активировал домашнюю страницу

Я работаю с приложением AngularJs v 1 с пользовательским интерфейсом маршрутизации.

Мой вопрос просто, как активировать домашнюю страницу, не нажимая на ссылку ui-sref.

Я пытался с ng-class="active", но это не решает задачу.

<script>
angular.module("myApp",['ui.router'])
.config(function ($stateProvider,$urlRouterProvider,$locationProvider) {
   $stateProvider
      .state("home",{
         url:"home",
         views:{
         'main':{templateUrl:"home.html"}
      }
});
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise("/home");
</script>
<div class="container" style="margin-top: 60px">
<div ui-view="main"> </div>
</div>

Главная страница

<div class="row" style=" margin-top:100px; " ng-app="app" ng-class="active">
<h1>Home</h1>
</div>  

1 ответ

То, что вы ищете, это ui-sref-active

Из документа

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

Это добавит active для вас, если вы находитесь в правильном состоянии.

Разметка должна выглядеть примерно так:

<div class="some-navigation-class">
    <a ui-sref="home" ui-sref-active="active">Home</a>
    <!-- more nav goes here -->
</div>
Другие вопросы по тегам