javascript - .addClass 不适用于 jqLit​​e / Angular.js

Question

我最近一直在努力理解为什么 .addClass 函数在 jqLit​​e 上不起作用

element.addClass('active')    

Element 向我返回了一个 html 元素数组，经过反复测试以确定。我可以 hide()、show()、添加一个 .css 或获取一个，甚至设置 .attr，但 addClass 抵制我。

编辑：元素是 svg 块中的路径，这就是似乎使 addClass 函数无关紧要的原因，仍在尝试修复它。

元素是一个 jqLit​​e 对象

谢谢你。

Answer 1

JqLite 方法不适用于由普通 javascript DOM 选择器（如querySelectoror ）选择的元素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>

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

这是小提琴的链接。