在Angularjs中，在路由更改时添加/删除CSS类

Question

在Angularjs中，在路由更改时添加/删除CSS类

angularjscss

3

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

- GeekOnGadgets

3个回答

2

试试这个：

app.run(function ($rootScope) {
  $rootScope.$on("$stateChangeStart", function(event, toState, fromState){

    if (toState.url === "/path") {
        $('div').addClass('className');
    } else {
        $('div').removeClass('className');
    }

  });
});

- Marius Wsl

1

你可以注册路由更改事件，并将此CSS添加到DOM中：

$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
     // Add your logic, for instance:
     $('body').addClass('hide-menu');
});

显然，在路由改变之前会触发事件："$locationChangeStart"，here。
/编辑/ - 更好的方法
此外，我更愿意使用ng-class属性，并将主控制器中的某个值简单地绑定到它上面。

app.controller('MainController', function ($scope) {
    $scope.toggleMenu = function(isToShow) {
        $scope.isVisibleMenu = isToShow == true;
    }; 
});

然后在你的HTML中：

<!-- Menu toggle button-->
<button ng-click="toggleMenu()"></button>

<div class="toggleable-menu" ng-class="{'visible-menu': isVisibleMenu}">
<!-- The menu content-->
</div>

并且使用最简单的CSS（当然，您可以添加动画或任何其他内容来切换此菜单。）

.toggelable-menu {
    display: none;
}

.toggelable-menu.visible-menu {
    display: block;
}

- Tomer

我通常会建议人们避免使用这种方法中描述的做法。你正在使用Angular，不应该使用jQuery来操纵body标签的类。其次，操纵这样一个顶级DOM标签对于简单控制导航可见性来说是多余的。第三，答案没有涉及基于状态的切换，你有一个按钮可以切换类。虽然可以使用类，但它可能是多余的，因为ng-show或ng-if就足够了，但无论哪种情况，你都没有提到基于$state的检查。 - ProLoser

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ProLoser · Accepted Answer

最简便高效的方法：

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

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

如果菜单有大量绑定，那么删除DOM将会提高性能。

然而，我经常告诉人们要考虑利用命名视图进行导航:

<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.
     }
  }
});

这里很酷的一点是，子状态可以覆盖并控制使用什么导航文件，甚至可以设置解析和控制器以在导航和内容之间共享数据。无需指令/服务！

最后，您也可以执行以下操作：

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

或者，您可以查看ui-sref-active

我的所有建议都假定您正在使用UI-Router，因为它是最好的!