我尝试使用指令和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使用’jqLite’,它只提供功能的子集.计算的CSS样式不是其中之一(由于性能影响,won’t be any time soon).
如果没有jQuery here,你可以做一些不错的参考