angularjs – 如何在不使用jQuery的情况下获取指令中的元素css?

我尝试使用指令和spin.js(不使用jQuery)使用AngularJS编写加载器.

我知道AngularJS有自己的jQuery lite.但是我无法从指令中的element获取宽度.

基本上我需要获得按钮宽度(内部指令)

我到目前为止尝试过:

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

开始了:

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,$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;
}]);

谢谢,

使用元素[0] .offsetWidth

.css(‘width’)将是未定义的,因为你没有任何定义宽度的内联CSS,而.width是一个jQuery的东西.

如果jQuery不可用,angular.element使用’jqLit​​e’,它只提供功能的子集.计算的CSS样式不是其中之一(由于性能影响,won’t be any time soon).

如果没有jQuery here,你可以做一些不错的参考

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...