Angular模板中先翻译再截取字符串显示空白，如何解决？

你的核心问题有两个：

1. 判断条件逻辑错误：当前ng-if判断的是未翻译的原始label（翻译key）的长度，这和翻译后的实际文本长度完全无关，导致触发截取的时机完全不对。
2. 异步翻译导致的空白：如果你的translate管道是异步加载翻译文件，直接链式调用translate+slice会在翻译完成前拿到空值，最终显示空白。

修改后的代码（AngularJS场景） #

方案1：利用AngularJS 1.3+的表达式赋值简化逻辑

<!-- 截取显示逻辑 -->
<span 
  ng-if="(vm.yaxis[vm.yaxis.length-1-yIndex].label | translate) as translatedLabel && translatedLabel.length > 10" 
  class="y-label tooltipped" 
  data-tooltip="{{translatedLabel}}" 
  data-position="bottom">
    {{translatedLabel | slice: 0 : 8}}
    <span class="y-label-dots">...</span>
</span>
<!-- 完整显示逻辑 -->
<span 
  ng-if="(vm.yaxis[vm.yaxis.length-1-yIndex].label | translate) as translatedLabel && translatedLabel.length <= 10" 
  class="y-label">
    {{translatedLabel}}
</span>

方案2：用ng-init复用翻译结果（避免重复调用管道）

<div ng-init="translatedLabel = vm.yaxis[vm.yaxis.length-1-yIndex].label | translate">
  <span 
    ng-if="translatedLabel.length > 10" 
    class="y-label tooltipped" 
    data-tooltip="{{translatedLabel}}" 
    data-position="bottom">
      {{translatedLabel | slice: 0 : 8}}
      <span class="y-label-dots">...</span>
  </span>
  <span 
    ng-if="translatedLabel.length <= 10" 
    class="y-label">
      {{translatedLabel}}
  </span>
</div>

关键改动说明 #

• 把判断条件从原始label的长度改为翻译后文本的长度，确保截取逻辑符合实际显示需求。
• 通过变量赋值的方式缓存翻译结果，既避免重复调用translate管道提升性能，又能确保在翻译完成后再执行截取和显示逻辑，解决异步导致的空白问题。
• 补充了长度不超过10时的完整显示逻辑，避免原本的ng-if不生效时无内容显示。

内容的提问来源于stack exchange，提问作者Danu