如何创建这个toggleClass函数作为AngularJS指令？

之前，我知道这样的事情角和jQuery，有老式的Javascript这样的：如何创建这个toggleClass函数作为AngularJS指令？

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中的指令实现？

来源

2014-12-08 nhuff717

您可以使用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>

来源

2014-12-08 04:30:23 ryeballar

我猜你也可以在'ng-class'中使用一个作用域变量，在'ng-click'作用域作用域呢？ – nhuff717 2014-12-08 05:46:56

是的，你也可以这样做，实际上这样测试更容易。 – ryeballar 2014-12-08 05:54:15

这正是我正在寻找的！ – 2015-08-18 22:11:21

角是不是jQuery的，所以你的思维过程不应该是添加删除类或显示，以在这些线路上做的隐藏元素或任何东西。

请参阅本SO张贴一些好的指针"Thinking in AngularJS" if I have a jQuery background?

在角模型驱动的视图。

你在做什么应该使用标准ng-class指令来完成。

比方说，你有一个网格的用户，你想要突出显示行时，用户单击行表示用户已被选中。你会去它的方式是定义该行HTML作为

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

现在的user.selected的状态将视图并切换为每次点击的类。

来源

2014-12-08 07:36:05 Chandermani

如何创建这个toggleClass函数作为AngularJS指令？

回答

相关问题