.addClass not working on jqLite / Angular.js

Question

I've been struggling lately to understand why the .addClass function was not working on jqLite

element.addClass('active')    

Element returns me an array of html elements, tested that over and over to be sure. I can hide(), show() , add a .css or get one, or even set .attr , but addClass resists me.

edit: element is a path in a svg block , and this is the reason that seems to make the addClass function irrelevant, still trying to fix it.

element is a jqLite object

Thank you.

Patience

I guess adding class is based on some logic in controller, why not use ngClass? – Veliger

I'm doing it into the .mouseenter() function, which is working fine, but .addClass was not working into it, then i tested it into the chrome console, everything is working except the addClass function ... – Patience

Element returns me an array of html elements.....would you post the array too in your question. – Warden

There is missing code in this question. element in angular could be used with angular.element method or by directive reference – Garth

Ok so i found the origin of the problem, but no solution yet. I was imprecise on my first post. Its a svg element that i target with element. I just tried on other blocks of my page, addClass works fine, but i can't achieve to addClass on a svg element ( a path here ) . – Patience

Well just tried on another test page with jQuery, it seems you can't addClass on svg elements at all, which seems pretty weird to me. – Patience

SVG support is only from 1.3 and forward, are you using angular 1.3? – Garth

Answer 1

JqLite methods don't work with elements selected by plain javascript DOM selectors like querySelector or document.getElementById(). if you need so, first select it with javascript selectors then wrap it in angular.element:

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

or simply

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

then you could use JqLite methods:
first example:

angElement.addClass('active');

second one:

myElement.addClass('active');

Tinytinya

Answer 2

I think this is generally a bad idea... Adding classes in angular is usually not done jquery style, you should use ng-class directive https://docs.angularjs.org/api/ng/directive/ngClass

the directive is quite simple to use..

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

This div will get class active when $scope.show is true

Secretarial

Answer 3

You have to use a directive to add and remove classes

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

Here is the link to the fiddle.

Hanser

This is an option but you don't have to use a directive. You could accomplish the same thing in a much more generic way directly from the controller. – Zuzana