title: How to get element css in directive without using jQuery?
body: <p>I try to write loader with AngularJS by using directive and spin.js (that doesn't use jQuery).</p>
  
  <p>I know that AngularJS has own jQuery lite. However I can't fetch <code>width</code> from <code>element</code> in directive.</p>
  
  <p>Basically I need get button width (inside directive)</p>
  
  <p>I tried so far:</p>
  
  <pre><code>element[0].width  // &lt; - error
  angular.element(element[0]).css('width')  // &lt; - undefined
  </code></pre>
  
  <p>Here we go:</p>
  
  <p>Demo in <kbd><a href="http://plnkr.co/edit/DKnpgUKRtSjsJCrt9svb?p=preview" rel="nofollow noreferrer">Plunker</a></kbd></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;button type="submit" loader left="5" ng-click="loadData()" &gt;Load Data&lt;/button&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>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); // &lt; - error
               console.log(angular.element(element[0]).css('width')); // &lt; - undefined
  
  
                 if(left_ &gt;= 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&amp;env=http%3A%2F%2Fdatatables.org%2Falltables.env&amp;format=json');
              var deferred = $q.defer();
              deferred.resolve(data);
              return deferred.promise;
          }
  
      }
      return factory;
  }]);
  </code></pre>
  
  <p>Thank you,</p>