Question

我在Angular中构建一个简单的菜单：

<ion-nav-view name="section"></ion-nav-view>
<div class="tabs-striped tabs-color-assertive tabs-icon-top">
    <div class="tabs">
        <a class="tab-item" ng-click="menuClick(1)">
            <i class="icon ion-home"></i>
            Test
        </a>
        <a class="tab-item" ng-click="menuClick(2)">
            <i class="icon ion-star"></i>
            Favorites
        </a>
        <a class="tab-item" ng-click="menuClick(3)">
            <i class="icon ion-gear-a"></i>
            Settings
        </a>
    </div>
</div>

处理此视图的控制器是：

app.controller('menu', function ($scope, $state) {
    $scope.menuClick = function(btn) {
        if(btn == 1) {
            $state.go('app.lists');
        }
        else if(btn == 2)
            $state.go('app.pay');

    }
});

如何在按下的按钮中添加一个类？

Answer 1

我想说最简单的方法是在$scope.pressed上制作$scope之类的其他变量，并在模板中使用ng-class

代码应如下所示：

$scope.menuClick = function(btn) {
   $scope.pressed = btn;
   if(btn == 1) {
       $state.go('app.lists');
   }
   else if(btn == 2)
       $state.go('app.pay');
}

和HTML将如下所示：

<div class="tabs-striped tabs-color-assertive tabs-icon-top">
    <div class="tabs">
        <a class="tab-item" ng-click="menuClick(1)" ng-class="pressed === 1 ? 'your new class' : ''">
            <i class="icon ion-home"></i>
            Test
        </a>
        <a class="tab-item" ng-click="menuClick(2)" ng-class="pressed === 2 ? 'your new class' : ''">
            <i class="icon ion-star"></i>
            Favorites
        </a>
        <a class="tab-item" ng-click="menuClick(3)" ng-class="pressed === 3 ? 'your new class' : ''">
            <i class="icon ion-gear-a"></i>
            Settings
        </a>
    </div>
</div>

Answer 2

我已经阅读了一些有关离子导航的内容，似乎它正在使用ui-router库。所以你可以尝试使用：

<div class="tabs-striped tabs-color-assertive tabs-icon-top">
    <div class="tabs">
        <a class="tab-item" ui-sref="path.to.state1" ui-sref-active="class name if in state">
            <i class="icon ion-home"></i>
            Test
        </a>
        <a class="tab-item" ui-sref="path.to.state2" ui-sref-active="class name if in state">
            <i class="icon ion-star"></i>
            Favorites
        </a>
        <a class="tab-item" ui-sref="path.to.state3" ui-sref-active="class name if in state">
            <i class="icon ion-gear-a"></i>
            Settings
        </a>
    </div>
</div>

ui-sref - 生成状态链接

ui-sref-active - 如果你处于这种状态，将会添加一个类。

唯一正确的解决方案是将按钮附加到状态。

作为替代方案，您可以执行以下操作：

$ scope。$ state = $ state; ＆lt; - 在您的控制器中。您应该将$ state对象共享给您的视图。

<div class="tabs">
    <a class="tab-item" ng-class="{'active': $state.is('state.path.state1')}" ng-click="menuClick(1)">
        <i class="icon ion-home"></i>
        Test
    </a>
    <a class="tab-item" ng-class="{'active': $state.is('state.path.state2')}" ng-click="menuClick(2)">
        <i class="icon ion-star"></i>
        Favorites
    </a>
    <a class="tab-item" ng-class="{'active': $state.is('state.path.state3')}" ng-click="menuClick(3)">
        <i class="icon ion-gear-a"></i>
        Settings
    </a>
</div>

Answer 3

更多的 jQuery-ish 类型的解决方案，但如果您不需要为了添加（或切换）css类而混淆$scope变量，那就更好了。< / p>

在ng-click中调用函数时，有一个隐式$event变量传递给名为（angular docs reference）的函数MouseEvent对象。

您可以使用target属性MouseEvent.target访问该元素，然后为managing the classes on the DOM element执行jQuery函数。

例如：

<div ng-click="clickHandler($event);"></div>

$scope.clickHandler = function($event) {
  var element = $($event.target);

  element.toggleClass('clicked');
}

从AngularJS中的控制器添加类

3 个答案: