javascript - AngularJS:如何访问元素上的 clientWidth (普通 JS 方法)

Question

真的，我认为这更多是一个时间问题......使用控制台，如果我记录“元素”(来自指令内)，我可以清楚地看到元素对象(在索引[0]处)和所有普通的JS方法:clientWidth、offsetWidth、innerHTML等。它也会显示clientWidth的正确值。问题是当我尝试访问 element[0].clientWidth 时，它返回值 0。所以看起来它试图在 DOM 创建元素之前获取该值，即使它是从链接函数中访问的。

在变量中使用之前我可以使用 $defer 或 $watch 等待该值吗？

供使用/引用:

angular.module('angularCharts').directive('acChart', ['$templateCache', '$compile','$window', function ($templateCache, $compile, $window) {
function link(scope, element, attrs) {
  var totalWidth = element[0].clientWidth,
     totalHeight = element[0].clientHeight;

  console.log(element);                   // returns object[0].clientWidth = 100
  console.log(element[0];                 // returns DOM element
  console.log(element[0].clientWidth)     // returns 0
}]);

来源:https://github.com/chinmaymk/angular-charts/blob/master/dist/angular-charts.js

Answer 1

是的。

var totalWidth, totalHeight;
scope.$watch(element, function () {
  totalWidth = element[0].clientWidth;
  totalHeight = element[0].clientHeight;
  console.log(totalWidth);         // returns 100
}