angularjs add css property to element without jquery

Question

In an angular directive I am making a clone of the element that I want which is

var node= element[0].cloneNode(true);

then I want to add css to this element. I know you can do this

$(node).css({width: width, left: left, height: height, top:'0px'});

but I know it is bad practice to use this in an angular directive. I have tried

angular.node.css({width: width, left: left, height: height, top:'0px'});

but this does not work. I have scoured the internet and have found nothing. All I get is jquery ways. Does anyone know how to add css to an element the angular way?

To any help, thanks!

Solution

Angular comes with jqLite, which is a trimmed down version of jQuery. There's nothing wrong with using it in a directive. clone() and css() are available in jqLite...

var node = element.clone()
                  .css({width: width, left: left, height: height, top:'0px'});

Working example: http://jsbin.com/yowubixa/1/edit?html,js,output

Comments

[user3339134]

Thanks for responding @phylax. But, I am doing all the values in javascript/directive so I can't use ngStyle

[user3339134]

Thanks @anthony, I thought this would work, but I still get a 'Uncaught TypeError: Cannot read property 'css' of undefined' error. Do you know what this could mean?

[Anthony Chu]

Can you post your code, maybe in a fiddle? I just tried this in the link function of a directive and it worked.

[Anthony Chu]

@user3339134 Updated answer with the example.

[user3339134]

that is weird, it works on jsbin, but I am still getting 'css' of undefined. Weird. Thanks for your input!

[user3339134]

What you said seems to work. Kind of. The reasons it might not work, may be on my part. In my directive when I print console.log(element[0].parentElement) I get the dom, but what I want is the array like thing that has children and offset. How do I print that info of a parent. By the way, since I think this works I am going to set this as the answer. Thanks!