How to get css element in directive without using jQuery?

Question

I am trying to write a loader using AngularJS using directive and spin.js (which does not use jQuery).

I know that AngularJS has its own jQuery lite. However, I cannot get width from element in the directive.

Basically, I need to get the width of the button (inside the directive)

I have tried so far:

 element[0].width // < - error angular.element(element[0]).css('width') // < - undefined 

Here we go:

Demo at Plunker

HTML

  <button type="submit" loader left="5" ng-click="loadData()" >Load Data</button> 

Js

 var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope, stockData, $timeout) { $scope.loadData = function(){ $scope.init(); stockData.query() .then(function (result) { $timeout(function () { $scope.data = result.data; $scope.stop(); return result.data; }, 3000); }, function (result) { alert("Error: No data returned"); }); } }); app.directive('loader', ['$parse', 'stockData', '$timeout', function ($parse, stockData, $timeout) { return { restrict: 'A', link: function (scope, element, attr) { var spinner; var opts = { lines: 13, // The number of lines to draw length: 3, // The length of each line width: 2, // The line thickness radius: 7, // The radius of the inner circle corners: 1, // Corner roundness (0..1) rotate: 0, // The rotation offset direction: 1, // 1: clockwise, -1: counterclockwise color: '#000', // #rgb or #rrggbb or array of colors speed: 1.3, // Rounds per second trail: 60, // Afterglow percentage shadow: false, // Whether to render a shadow hwaccel: false, // Whether to use hardware acceleration className: 'spinner', // The CSS class to assign to the spinner zIndex: 2e9, // The z-index (defaults to 2000000000) top: 'auto', // Top position relative to parent in px left: 'auto' // Left position relative to parent in px }; target = element[0]; scope.init = function(){ attr.$set('disabled', true); if(attr['left'] != undefined){ var left_ = parseInt(attr['left']); console.log(element[0].width); // < - error console.log(angular.element(element[0]).css('width')); // < - undefined if(left_ >= 0){ //opts.left = element.width() + parseInt(attr['left']); } else{ // opts.left = -element.width()/2 + parseInt(attr['left']); } } spinner = new Spinner(opts).spin(target); }; scope.stop = function(){ attr.$set('disabled', false); spinner.stop(); }; } }; }]); app.factory('stockData', ['$http', '$q', function ($http, $q) { var factory = { query: function () { // dummy call var data = $http.get('http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22YHOO%22)%0A%09%09&env=http%3A%2F%2Fdatatables.org%2Falltables.env&format=json'); var deferred = $q.defer(); deferred.resolve(data); return deferred.promise; } } return factory; }]); 

Thanks,

Answer 1

Use element[0].offsetWidth

.css('width') will be undefined since you do not have CSS built-in that defines the width, and .width is jQuery.

angular.element uses 'jqLite' if jQuery is not available, which offers only a subset of functions. The computed CSS style is not one of these things (and will not be soon due to performance implications).

There's a decent link to what you can do without jQuery here

Answer 2

element[0].getBoundingClientRect() is another powerful API.

You can get bottom , height , left , right , top , width by calling:

 element[0].getBoundingClientRect() 

Answer 3

For those of you who are interested in getting an arbitrary CSS property, you can access the CSS style of the Angular element in a directory link function

 var style = window.getComputedStyle(element[0]), 

And then access the value of any CSS rule, for example:

 var color = style.getPropertyValue('color');