.addClass在jqLite / Angular.js上不起作用

Question

我最近一直在努力理解为什么.addClass函数不能在jqLite上工作

element.addClass('active')    

元素向我返回一个html元素数组，并反复测试以确保这一点。我可以隐藏()、显示()、添加或获取.css，甚至设置.attr，但addClass拒绝我。

addClass : element是svg块中的一个路径，这就是为什么似乎使edit函数变得无关紧要的原因，它仍在尝试修复它。

元素是一个jqLite对象

谢谢。

Answer 1

JqLite方法不能处理由普通javascript DOM选择器(如querySelector或document.getElementById() )选择的元素。如果需要，首先使用javascript选择器选择它，然后将其包装在angular.element中

var element = document.querySelector('a[target="_blank"]');
var angElement = angular.element(element);

或者简单地说

var myElement = angular.element( document.querySelector('a[target="_blank"]') );

然后，您可以使用JqLite方法：

第一个示例：

angElement.addClass('active');

第二个：

myElement.addClass('active');

Answer 2

我认为这通常是个坏主意。在angular中添加类通常不是jquery风格的，您应该使用ng-class指令https://docs.angularjs.org/api/ng/directive/ngClass

该指令使用起来非常简单。

<div ng-class="{active: show}"></div>

当$scope.show为true时，此div将激活类

Answer 3

您必须使用指令来添加和删除类

HTML：

    <div ng-controller="MyCtrl">
        <input type="button" active value='One' />
        <input type="button" active value='Two' />
        <input type="button" active value='Three' />
    </div>

JS：

    var app = angular.module('myApp',[]);

    app.directive('active', function() {
        return {
            link: function(scope, element, attrs) {
                element.bind('click', function() {
                    //Remove the active from all the child elements
                    element.parent().children().removeClass('active');

                    //Add active class to the clicked buttong
                    element.addClass('active');
                })
            },
        }
    });

    function MyCtrl($scope) {
    }

这是小提琴的link。