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

前端之家收集整理的这篇文章主要介绍了angularjs – 我们什么时候知道Angular中元素的实际宽度?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在创建一个指令,将中心一个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?

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

据我所知,你需要做这个工作的唯一变化是将$ scope更改为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();
  });

这个用法的想法来到我看了一个非常类似的类型的用法关于观看$窗口而不是当前元素,原始的工作可以在这里找到。

Angular.js: set element height on page load

原文链接:https://www.f2er.com/angularjs/145174.html

猜你在找的Angularjs相关文章