angularjs - 在 Angularjs 中添加/删除路由更改的 CSS 类

标签 angularjs css

我不确定这在 Angular 中是如何实现的。我想在路由更改时添加和删除 CSS 类。我正在尝试显示和隐藏垂直菜单。目前我正在使用 ui-route。任何建议或示例链接将不胜感激,也欢迎对我的问题采取不同方法的任何其他建议

最佳答案

最简单有效的方法:

angular.module(...).run(function($rootScope, $state) {
  $rootScope.$state = $state;
});

<div ng-if="$state.contains('someState')">...</div>

如果菜单有很多绑定(bind),这将删除 DOM,这将提高性能。

但是,我经常告诉人们考虑利用命名 View 进行导航:

<body>
  <nav ui-view="nav"></nav>
  <div class="container" ui-view></div>
</body>

$stateProvider.state('home', {
  views: {
    'nav@': {
       templateUrl: 'nav.html'
     }
     '': {
       // normal templateUrl and controller goes here.
     }
  }
});

最酷的部分是子状态可以覆盖和控制要使用的导航文件,甚至可以设置在导航和内容之间共享数据的解析和 Controller 。无需指令/服务!

最后,您还可以执行以下操作:

<nav ng-show="$state.contains('somestate')"></nav>
<nav ng-class="{someClass:$state.contains('somestate')}"></nav>

或者 checkout ui-sref-active

我的所有建议主要假设您正在使用 UI-Router,因为它是最好的!

关于angularjs - 在 Angularjs 中添加/删除路由更改的 CSS 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26825618/

相关文章:

javascript - 使用 AngularJs 上传文件/图片

angularjs - 在 AngularJS 中如何为 Angular-Material 中的 md-tabs 启用滑动功能?

AngularJS 在不同的地方处理不同的错误代码

html - 它可以用 HTML 和 CSS 制作一个模态弹出窗口吗?

javascript - 如何在滚动和使用 jquery 偏移量时减少闪烁

javascript - 类型错误 : Cannot read property 'post' of undefined

javascript - 如何使用 $http 为 Rest API 调用创建通用服务?

jquery - 如何在隐藏元素溢出的jquery中获取IE7中的实际宽度

CSS 菜单。适用于除 IE 以外的所有浏览器

css - 输入[类型 ="button"] Sprite 悬停有过渡问题