Unable to set css property of element with angular

Question

I have an element in the dom that i get in a directive like this

angular.element.find('#id-campaign-menu')

all good till i try to apply some new css to it like so

var el = angular.element.find('#id-campaign-menu');
el.css({left: 400});

I get

Uncaught TypeError: el.css is not a function(…)

Pankaj Parkar · Accepted Answer · 2016-08-17 20:59:43Z

3

Angular jQLite object doesn't lookup through custom element's and custom selector's. It does look up for nodes/DOM only like button, input, div, etc.

If you loaded jQuery before Angular then jQLite API gets overrided by jQuery API. So you can do selector based query over DOM.

You could change your query to below for make it working with jQLite.

var campaignMenu = angular.element(document.getElementById('id-campaign-menu');
campaignMenu.css({left: 400});

answered Aug 17, 2016 at 20:59

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tomh · Accepted Answer · 2016-08-17 21:07:06Z

0

Here's the list of functions supported by Angular's jqLite.

Note that for .css():

css() - Only retrieves inline-styles, does not call getComputedStyle(). As a setter, does not convert numbers to strings or append 'px', and also does not have automatic property prefixing.

So to support .css() calls that mutate the DOM, import jQuery before Angular, or use vanilla JS document selectors like document.getElementById.

answered Aug 17, 2016 at 21:07

tomh

11 bronze badge

Collectives™ on Stack Overflow

Unable to set css property of element with angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related