我们什么时候知道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

首先,当我为指令而不是链接函数定义控制器时,我只使用了这个逻辑.因此,在链接函数中定义它可能会导致不同的行为,但我建议您首先尝试它,如果您无法使它工作,那么切换到使用控制器.

据我所知,你需要做的唯一改变就是将$ scope更改为范围调用,将$ element更改为element,因为依赖注入对象成为标准链接函数参数.

  $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:在页面加载时设置元素高度

Answer 2

詹姆斯的回答让我:

app.directive('measureInto', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.$watch(function() {
                    return element[0].clientWidth;
                }, function(value){
                    scope[attrs.measureInto] = element[0].clientWidth + 10;
                });
            }
        };
    });

所以,在运行时,我添加这个并分配到任何范围变量我想要的元素的宽度我正在寻找