我们什么时候知道在角元素的实际宽度？ [英] When do we know the actual width of an element in Angular?

问题描述

我特林创建一个指令，将围绕一个div。

I'm tring to create a directive that will center a div.

到目前为止，我有这个code：

So far, I have this code:

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。

The problem is the width of the element. The whole point for this directive is that the div that uses this directive, don't have a width set. I want this directive to figure out the width and center the div.

我遇到的问题是，在调用指令时，div的实际宽度还不知道。当我使用这在我的情况下，DIV为800像素，但是当页面加载完成后，股利是221px。

The problem I encounter is that when the directive is invoked, the actual width of the div is not yet known. When I use this in my situation, the div is 800px, but when the page is finished loading, the div is 221px.

所以，我能做些什么等到实际宽度是已知的div？

So, what can I do to wait till the actual width is known of the div?

推荐答案

首先，我只有用我的指令，而不是定义的控制器这个逻辑链接功能。因此，在链接功能定义它，而不是可能会导致不同的行为，但我建议你先试试它那里，如果你不能得到它的工作，然后切换到使用一个控制器。

First, I only have used this logic when I defined a controller for a directive rather than a link function. So defining it in a link function instead may cause different behavior, but I suggest you try it there first and if you can't get it to work then switch to using a controller.

据我所知道的，唯一的变化就需要使这项工作是改变$范围范围呼叫和$元素，因为依赖注入的对象成为标准链接功能参数元素。

As far as I can tell, the only change you would need to make this work would be to change $scope to scope calls and $element to element since the dependency injected objects become standard link function parameters.

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

对于这种用法的想法阅读一个非常相似的类型使用约看着$窗口，而不是当前的元素之后来找我，原来工作可以在这里找到。

The idea for this usage came to me after reading a very similar type of usage about watching the $window rather than the current element, the original work can be found here.

<一个href=\"http://stackoverflow.com/questions/14703517/angular-js-set-element-height-on-page-load\">Angular.js:在页面加载设置元素高度

这篇关于我们什么时候知道在角元素的实际宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！