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!

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!

• javascript
• css
• angularjs

4 Answers 4

Angular es 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./yowubixa/1/edit?html,js,output

ngStyle directive takes an "Expression which evals to an object whose keys are CSS style names and values are corresponding values for those CSS keys."

To those who may find this later, I found the solution to my problem. The reason why I could not do node.css() was because node was a dom element. This was due to my copy. To keep the javascript object you have to do

angular.element(element[0]).clone() 

to properly clone it. this then allows me to do node.css(). You can do other things besides .css. You can look at the following here.

http://docs.angularjs/api/ng/function/angular.element

Hope this helps!

open ....ponent.js

angular.element(idName).css("background", "#000");

i.e hello is idName in div.

<div id="hello"></div>