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事件中使用过这个toggleClass名称，如下所示：

<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>

Answer 2

Angular不是jQuery，所以你的思考过程不应该是添加删除类或显示隐藏元素或在这些行上做任何事情。

请参阅此SO帖子以获取一些好的指示"Thinking in AngularJS" if I have a jQuery background?

在Angular模型中驱动视图。

您正在使用标准ng-class指令完成所做的工作。

假设您有一个用户网格，当用户点击表示已选择用户的行时，您需要突出显示行。你想要的方法是将行html定义为

<tr ng-repeat='user in users' ng-click='user.selected=!user.selected' ng-class={'active': user.selected}>
</tr>

现在user.selected的状态驱动视图并在每次点击时切换班级。

如何将此toggleClass函数创建为AngularJS指令？

2 个答案: