Question

这是我的HTML：

<div class="navigation">
    <ul class="nav nav-tabs">
        <li ng-class="tab1">
            <a ui-sref="general" ng-click="tab1='active'; tab2=''; tab3=''">General</a>
        </li>
        <li ng-class="tab2">
            <a ui-sref="corrective" ng-click="tab1=''; tab2='active'; tab3=''">Corrections</a>
        </li>
    </ul>
</div>

那就是我的js：

var myApp = angular.module('myApp', ["ui.router"])
myApp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/general");
$stateProvider
.state('general', {
  url: "/general",
  templateUrl: "template/general.html",
  controller: function($scope) {
    $scope.tab1='active';
  }
})
.state('corrective', {
  url: "/corrective",
  templateUrl: "template/corrective.html",
  controller: function($scope) {
    $scope.tab2='active';
  }
})

}）;

Sory，我是初学者，我需要改变依赖于路线的ng-class。有什么问题？

Answer 1

现在你正在给<li>班tab1。这可能不是你想要做的。相反，你可以这样做：

<li ng-class="{'active': tab1=='active'}">

这意味着：假设满足条件active，将类设置为tab1=='active'。

在我的应用程序中，我以另一种方式执行此操作。我在app.run()中定义了一个全局函数：

$rootScope.isActive = function() {
  return Array.prototype.some.call(arguments, function(arg) {
    return $state.is(arg);
  });
}

每当我想根据状态有条件地应用一个类时，我会这样做：

<li ng-class="{'active' : isActive('someState','anotherState','moreStates')}">

作为奖励，这也允许相同的元素将active类应用于多个状态。在您的示例中，您只需要

<li ng-class="{'active' : isActive('general')}">

和

 <li ng-class="{'active' : isActive('corrective')}">

最重要的是，您不再需要ng-click。

如何通过路由器控制器更改ng-class？

1 个答案: