AngularJS指令在点击时添加类,但如果单击则删除并将其添加到另一个元素

Question

我有一个简单的指令,用于在点击时添加一个类,如果再次单击,则从元素中删除它.但是我想重构它以便在通用菜单中更常用.相反,如果<li>单击的元素不是当前活动元素,则应将其从当前元素中删除并将其放在新元素上.基本上我想<li>为当前活动的元素添加一个"活动"类.

在我的菜单中,我有:

<ul>
    <li><a swapit ng-click="lol(stillgot)" class="select-show">Still Got Game</a></li>
    <li><a swapit ng-click="lol(thick)" class="select-show">TnT</a></li>
    <li><a swapit ng-click="lol(seldon)" class="select-show">Seldon</a></li>
    <li><a swapit ng-click="lol(hit)" class="select-show">HitMan</a></li>
    <li><a swapit ng-click="lol(community)" class="select-show">Community</a></li>
</ul>

.directive('swapit', function() {

  return {
    restrict : 'A',

    link : function(scope, elem) {

      var currentState = true;

      elem.on('click', function() {
        console.log('You clicked me!');

        if(currentState === true) {
          console.log('It is on!');
          angular.element(elem).addClass('active');
        } else {
          console.log('It is off!');
          angular.element(elem).removeClass('active');
        }

        currentState = !currentState;

      });


    }
  };
});

Answer 1

如果使用隔离范围,则可以避免DOM操作并允许重用ng-class:

指示:

.directive('swapit', function(){
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: {
      active: '='
    },
    template: '<a ng-click="active = $id" ng-class="{active: $id === active}" ng-transclude></a>'
  }
})

HTML:

<swapit active="active">Still got game</swapit>
<swapit active="active">TnT</swapit>
...

通过使用隔离范围,每个指令元素将拥有自己的作用域,并具有唯一的ID,可通过该ID进行访问scope.$id.单击指令元素时,可以将此值分配给active范围变量,该范围变量在指令之间共享.

ng-click="active = $id"

然后,您可以使用ng-class表达式来确定每个指令元素的作用域ID是否与当前活动作用域ID的作用域ID匹配:

ng-class="{active: $id === active}"

查看此演示,它更符合您的实现(尽管不是100%).