.addClass not working on jqLite / Angular.js

javascript angularjs jqlite
Nkogo picture Nkogo · Nov 10, 2014 · Viewed 16.7k times · Source

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.

Answer

Reyraa picture Reyraa · Nov 22, 2014

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');

Related questions

AngularJS - get element attributes values

How do you get an element attribute value? e.g. HTML element: <button data-id="345" ng-click="doStuff($element.target)">Button</button> JS: function doStuff(item){ angular.element(item)[0].data('id'); // undefined is not a function } Any suggestions …

Read More
AngularJS - Image "onload" event

I've been searching for an answer to simple but not trivial question: What is a right way to catch image' onload event in Angular only with jqLite? I found this question , but I want some solution with directives. So as …

Read More
How to check if element with ID exists in AngularJS

How can I check if an element with a specific ID already exists in my DOM inside an Angular directive? By using angular.element() an element is created if one does not exist, for example angular.element('someID') will return …

Read More