Question

我想添加/删除CSS类，就像jQuery的$('#element').addClass('new_class')和removeClass()一样。 AngularJS是否提供不需要jQuery或jQLite的本机解决方案？我们的主要开发人员说他会出于性能原因删除jQuery，所以我需要一个原生解决方案。

我相信下面的例子使用的是jQLite，它也会被删除。

angular.element('#element').addClass("new_class");

是否有真正的原生选择？

P.S。我使用过ngClass，这似乎不适合我的需要，因为我需要从Controller控制它。我基本上使用Animate.css库来制作动画，因此在某些事件上我需要添加/删除CSS类来触发动画。我不认为我可以用ngClass实现这一点。

Answer 1

您只需将变量绑定到指令＆＃34; ng-class＆＃34;并从控制器更改它。以下是如何执行此操作的示例：

＆＃13;

var app = angular.module("ap",[]);

app.controller("con",function($scope){
  $scope.class = "red";
  $scope.changeClass = function(){
    if ($scope.class === "red")
      $scope.class = "blue";
    else
      $scope.class = "red";
  };
});

＆＃13;

.red{
  color:red;
}

.blue{
  color:blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="ap" ng-controller="con">
  <div ng-class="class">{{class}}</div>
  <button ng-click="changeClass()">Change Class</button>    
</body>

＆＃13;

Answer 2

这个网站将成为您远离jQuery的良好资源： http://youmightnotneedjquery.com

这是删除类的示例：

if (el.classList)
  el.classList.remove(className);
else
  el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');

这应该足以让你前进。

如何在原生AngularJS中添加/删除CSS类（不依赖于jQuery）？

2 个答案: