How to retrieve css property from element in directive?

[mike.c...@gmail.com]

 can set css properties on an element in a directive. But I cannot retrieve css properties on an element using the same method, it just returns an empty string.

i.e: var test = element.css("background-size"); //does not work!

What am I doing wrong? See my link handler in my directive below:

NOTE: Is it possible that in jqlite,  .css() retrieves only inline styles?    See: https://github.com/angular/angular.js/issues/2866

link: function($scope, element, attrs) {

                        //debugger;

                        //handler for close button:
                        //its the first child within the parent element:
                        $scope.closeBtn = angular.element(element.children()[0]);


                        //save the background image so we can toggle its visibility:
                        $scope.backgroundImg = element.css("background","url(../../a0DK0000003XvBYMA0/assets/images/tabbed_panel_bkgd.png) no-repeat") ;//className:
                        element.css("background-position","0px 35px");
                        element.css("background-size", "924px 580px");

                        //above I was able to set css properties, but why can't I  retrieve css properties like this??:
                        var test = element.css("background-size");

                        $scope.closeBtn.bind('click',function(){
                            TweenLite.to(element, .75, {top:"635px",ease:Power2.easeOut,
                                onComplete:function(){
                                    $scope.opened = false;
                                    $scope.closeBtn.css('opacity',0);
                                }   });
                        })
                        //hander to raise tab panel:
                        element.bind('click', function() {
                            if(!$scope.opened){
                                //debugger;
                                $scope.closeBtn.css('opacity',1);
                                TweenLite.to(element, .75, {top:"150px",ease:Power2.easeOut});
                                $scope.opened = true;    
                            }
                        });

                    }

[Gabriele Rabbiosi]

I'm having the same problem, using jqLite it seems I can only retrieve inline styles!!

Does anyone have an answer to this one? How can one retrieve "not-inline" css using jqLite?!?

[Jason Levinsohn]

Yoz,

Not sure about the jqlite, but with jQuery installed:

When the directive runs, the DOM hasn't set the styles from the stylesheets yet so you get an empty string.  Set a watcher to watch the elements style and it will run after it has been set the first time.  Then Angular will get it.

scope.$watch(element.css("background-size", function() {

  console.log("We got our style now: ", element.css("background-size");

}

[Daniel Tabuenca]

Yes jqlite css function is very simple, it just returns element.style[name]; If you need more advanced functionality, you would have to include jquery or use the native dom apis.