.addClass不适用于jqLite/Angular.js

Question

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

element.addClass('active')    

Element向我返回了一个html元素数组，并对其进行了反复测试。我可以隐藏（）、显示（）、添加.css或获取一个，甚至设置.attr，但addClass阻止了我。

edit:element是svg块中的一个路径，这就是似乎使addClass函数不相关的原因，仍在尝试修复它。

元素是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

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) {
    }

这是小提琴的链接。