javascript - 根据嵌套指令 Angular 的宽度更改文本

Question

所以我有一个 ng-repeat 循环遍历数据对象并将其显示在列表指令中。当文本元素的长度等于或超过容器的长度时，列表中的对象之一应使用缩写版本。所以我所拥有的是:

//this is the list directive
<shift-list selection="selection" shifts="shifts"></shift-list>

//this is the template of the list directive that adds site-base-name directive
<ion-item collection-repeat="shift in shifts">
<div class="item-text">
<site-base-name shift="shift"></site-base-name>
</div>

//and here is what my site-base-name directive looks like
return {
        restrict: 'E',
        link: function(scope, element) {
            $timeout(function(){
                scope.siteBaseWidth = element[0].offsetWidth;
                scope.parentWidth = element.parent()[0].offsetWidth;
            });
        },
        replace: true,
        scope: {
            shift: '='
        },
        template: ''+
        '<div class="sitebase">{{(siteBaseWidth + 20 >= parentWidth) && shift.sites_abbreviation || shift.sites_name }} : {{shift.bases_name}}</div>'

    }
}

所以我正在做的是将指令 site-base-name 嵌套在列表指令中，然后找到元素及其父元素的大小。如果大小超过我的条件 (siteBaseWidth + 20 >= parentWidth)，我将使用名称的缩写版本 (shift.sites_abbreviation)。这个问题是我得到的行为是错误的和不一致的。它还会在 DOM 加载后应用更改，因此您可以在窗口中看到文本更改。

我的问题是找到文本元素和父元素的宽度然后应用决定用什么数据填充绑定(bind)的条件的最佳方法是什么？最好是干净的 Angular 解决方案。

Answer 1

依赖于元素 offsetWidth 不是很干净，好像迫使您等待 DOM 更新(因此您的 $timeout 和观察到的闪烁)。

解决您的问题的一种廉价方法是最初以 0.01 的不透明度显示您的文本(因此它不可见，但仍占用一些空间)，并在您知道它后使用您的 site-base-name 指令大小并调整文本，您可以将其不透明度设置回 1。

现在更好的解决方案是摆脱这个 $timeout 和 offsetWidth。如果您使用等宽字体，您甚至可以在显示之前计算字符串长度乘以像素每个字符。