angularjs - AngularJs ui设置主页激活

Question

我正在使用带有 ui 路由的 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>  

Answer 1

你正在寻找的是ui-sref-active

从文档

与 ui-sref 一起工作的指令，用于在相关 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>