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

发布时间：2020-12-17 08:27:17 所属栏目：安全来源：网络整理

导读：我正在创建一个指令，将中心一个div。到目前为止，我有这个代码： app.directive("setcenter",function () { return { scope:{ setcenter: '=' },link: function (scope,element,attrs) { scope.$watch('setcenter',function (newValue) { if (newValue ==

我正在创建一个指令，将中心一个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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!