angularjs - 我们什么时候知道 Angular 中元素的实际宽度？

Question

我正在尝试创建一个将 div 居中的指令。

到目前为止，我有这段代码:

app.directive("setcenter", function () {
    return {
        scope:{
            setcenter: '='
        },
        link: function (scope, element, attrs) {

            scope.$watch('setcenter', function (newValue) {
                if (newValue == true) {
                    var width = element.width();
                    element.css('position', 'absolute');
                    element.css('top', '80px');
                    element.css('left', '50%');
                    element.css('z-index', '200');
                    element.css('margin-left', '-' + width / 2 + 'px');
                }
            });
        }
    }
});

问题是元素的宽度。该指令的全部要点是使用该指令的 div 没有设置宽度。我希望这个指令能够计算出 div 的宽度和居中。

我遇到的问题是，当调用该指令时，div 的实际宽度尚不清楚。当我在我的情况下使用这个时，div是800px，但是当页面加载完成时，div是221px。

那么，我该怎么做才能知道 div 的实际宽度呢？

Answer 1

首先，我仅在为指令而不是链接函数定义 Controller 时使用了此逻辑。因此，在链接函数中定义它可能会导致不同的行为，但我建议您先在那里尝试一下，如果无法使其工作，则切换到使用 Controller 。

据我所知，完成这项工作所需的唯一更改是将 $scope 更改为作用域调用，将 $element 更改为 element，因为依赖项注入(inject)对象成为标准链接函数参数。

  $scope.getElementDimensions = function () {
    return { 'h': $element.height(), 'w': $element.width() };
  };

  $scope.$watch($scope.getElementDimensions, function (newValue, oldValue) {
    //<<perform your logic here using newValue.w and set your variables on the scope>>
  }, true);

  $element.bind('resize', function () {
    $scope.$apply();
  });

在阅读了有关观察 $window 而不是当前元素的非常类似的用法后，我想到了这种用法，可以在此处找到原始作品。

Angular.js: set element height on page load