Question

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

Answer 1

最简单，最有效的方式：

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，因为它是最好的！

Answer 2

试试这个：

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

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

  });
});

Answer 3

您可以注册更改的路线并将此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;
}

在Angularjs中添加/删除Route Change上的CSS类

3 个答案: