javascript - 我如何将这个 toggleClass 函数创建为 AngularJS 指令？

Question

在我了解 Angular 和 jQuery 之类的东西之前，有这样简单的旧 Javascript:

function toggleClass(e, c) {
    var classes = e.className.split(' ');
    var match = false;
    for(var i=0; i<classes.length; i++) {
        if(classes[i] === c) {
            match = true;
            classes.splice(i,1);
            break;
        }
    }
    if(!match) classes.push(c);
    e.className = classes.join(' ');
}

我过去曾使用它在 onclick 事件中切换类名，如下所示:

<div onclick="toggleClass(this,'foo')"></div>

Here is a working JSFiddle .

我如何在 Angular 中将其实现为指令？

Answer 1

您可以使用 AngularJs 的 ng-class指令而不是创建另一个指令。

angular.module('demo', [])

  .controller('Ctrl', function($scope) {
     $scope.toggleRed = true;
  });

.box {
  padding: 50px;
  display: inline-block;
  background-color: #efefef;
}

.box.red-box {
  background-color: red;
}

<div ng-app="demo" ng-controller="Ctrl">
  
  <div class="box" 
       ng-class="{'red-box': toggleRed}" 
       ng-click="toggleRed = !toggleRed">Click Me</div>
  
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>