Question

我有一个html元素：

<i ng-click="run()"></i>

并在我的控制器中：

$scope.run() = function($event) {
   var el = $event.currentTarget;
}

现在我如何才能在el元素上添加一些类，但el.addClass('class-name')无法正常工作

我只能在这里使用javascript而不是jquery

Answer 1

ng-class="expression"

建议您使用ng-class而不是使用控制器来添加类。

但如果您需要

，也可以使用element.classList.add('className')

Answer 2

HTML：

<i ng-click="run($event)"></i>

JS：

$scope.run() = function(event) {
   var element = angular.element(event.currentTarget);
   element.addClass('new');
 }

Answer 3

使用classList API修改元素上的类时，需要使用classList命名空间。即。

el.classList.add('class-name');

看起来你还在想jQuery。

Answer 4

你可以在这里使用ng-class演示Jsfiddle demo

Js代码

  var app = angular.module('app', []);
  app.controller('ctrl', function($scope) {
    $scope.myClass = false;
    $scope.addClass = function() {
      $scope.myClass = true;
    }
  });

<强> HTML

  <div ng-app="app">
    <div ng-controller='ctrl'>
      <span ng-class='{myClass:myClass}'>This my content</span>

      <button ng-click='addClass()'>
        Add class
      </button>
    </div>
  </div>

Answer 5

我认为更合适的做法是将ng-class用于i元素，并将其绑定到范围内的某个变量。

示例：

您的HTML：

<i ng-click="changeClass()" ng-class="myClass"></i>

你的Angular控制器：

function Controller($scope){

 $scope.myClass = "";
 $scope.changeClass = function() {
     $scope.myClass = //Put here your CSS class
}

}

Answer 6

您可以在Angular js中使用ng-class

<i ng-class="myclass" ng-click="run()"></i>

控制器中的

$scope.run() = function(event) {
  $scope.myclass="classname";
 }

Answer 7

只需在HTML

中添加如下内容即可

<i ng-click="run($event)">i</i>

在控制器中

 $scope.run = function($event) {
            $event.target.classList.add("className")
        }

如何更改从ng-click（）获取的html元素类

7 个答案: