Question

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

//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嵌套在list指令中，然后找到元素及其父元素的大小。然后，如果大小超过我的条件（shift.sites_abbreviation），我将使用名称的缩写版本（siteBaseWidth + 20 >= parentWidth）。这个问题是我得到的行为是错误和不一致的。它还会在加载DOM后应用更改，因此您可以在窗口中看到文本更改。

我的问题是找到文本元素和父元素的宽度的最佳方法是什么，然后应用一个条件来决定填充绑定的数据？优选干净的角度溶液。

Answer 1

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

解决问题的一种便宜的方法是首先显示不透明度为0.01的文本（因此它不可见，但仍需要一些空间），并且使用site-base-name指令，一旦你知道它的大小和调整文本，您可以将其不透明度设置回1。

现在更好的解决方案是摆脱这个$ timeout和offsetWidth。如果你使用等宽字体，你可以计算thestring.length乘以pixelsPerCharacter，甚至可以显示它。

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

1 个答案: