8

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.

Nkogo
  • 81
  • 1
  • 1
  • 5
  • I guess adding class is based on some logic in controller, why not use ngClass? – maurycy Nov 10 '14 at 09:23
  • 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 ... – Nkogo Nov 10 '14 at 09:25
  • _Element returns me an array of html elements_.....would you post the array too in your question. – Jai Nov 10 '14 at 09:27
  • There is missing code in this question. element in angular could be used with angular.element method or by directive reference – Linial Nov 10 '14 at 09:29
  • 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 ) . – Nkogo Nov 10 '14 at 09:35
  • 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. – Nkogo Nov 10 '14 at 09:43
  • SVG support is only from 1.3 and forward, are you using angular 1.3? – Linial Nov 10 '14 at 09:44

3 Answers3

25

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');
Reyraa
  • 3,951
  • 2
  • 25
  • 50
3

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

dinodsaurus
  • 4,481
  • 3
  • 17
  • 23
2

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.

Srinivas Paila
  • 817
  • 6
  • 10
  • 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. – shanzilla Feb 28 '17 at 19:39