.addClass没有在jqLit​​e / Angular.js上工作

Question

我最近一直在努力理解为什么.addClass函数无法在jqLit​​e上运行

element.addClass('active')    

Element返回一个html元素数组，经过一遍又一遍的测试以确定。我可以隐藏（），show（），添加.css或获取一个，甚至设置.attr，但addClass会抵制我。

edit：element是svg块中的路径，这就是使addClass函数无关紧要的原因，仍在尝试修复它。

元素是一个jqLit​​e对象

谢谢。

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

我认为这通常是一个坏主意...在角度中添加类通常不是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。