首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >AngularJs ui将主页设置为活动状态

AngularJs ui将主页设置为活动状态
EN

Stack Overflow用户
提问于 2018-02-25 12:31:33
回答 1查看 38关注 0票数 0

我正在使用带有ui路由的AngularJs v1应用程序。

我的问题很简单,如何在不单击ui-sref链接的情况下将主页设置为活动状态。

我尝试使用ng-class="active“,但它不能完成任务。

代码语言:javascript
代码运行次数:0
运行
复制
<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>

主页

代码语言:javascript
代码运行次数:0
运行
复制
<div class="row" style=" margin-top:100px; " ng-app="app" ng-class="active">
<h1>Home</h1>
</div>  
EN

回答 1

Stack Overflow用户

发布于 2018-02-25 17:28:14

你要找的是ui-sref-active

来自文档

与ui-sref一起工作的指令,用于在相关ui-sref指令的状态为活动时向元素中添加类,并在不活动时删除它们。主要用例是简化依赖于ui-sref的导航菜单的特殊外观,方法是让“活动”状态的菜单按钮看起来不同,从而将其与非活动菜单项区分开来。

如果您当前处于正确的状态,它将为您添加active

标记应该看起来像是

代码语言:javascript
代码运行次数:0
运行
复制
<div class="some-navigation-class">
    <a ui-sref="home" ui-sref-active="active">Home</a>
    <!-- more nav goes here -->
</div>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/48970239

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档