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(…)

Answer 1

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

Answer 2

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 .