gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 19:28:22 25 4
gpt4 key购买 nike

我正在尝试创建一个将 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 的实际宽度呢?

最佳答案

首先,我仅在为指令而不是链接函数定义 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

关于angularjs - 我们什么时候知道 Angular 中元素的实际宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17726313/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com