Angular-translate：翻译加载完成后执行函数的实现方案

嘿，这个场景我太熟了！异步加载翻译时，Angular的DOM更新时机确实容易踩坑——你页面初始化时拿的是翻译前的占位高度，按钮触发时翻译已经加载完了，自然能拿到正确值。别慌，Angular-translate其实给咱们留了官方的事件监听方案，完美解决这个问题：

方法一：监听$translateChangeSuccess事件（最推荐） #

Angular-translate在**翻译加载完成（包括首次加载和语言切换）**时，会广播$translateChangeSuccess事件，这时候Angular已经完成了digest cycle，DOM里的翻译文本已经渲染完毕，刚好是你获取高度的最佳时机。

你可以在控制器里通过$rootScope监听这个事件，然后在回调里执行你的jQuery高度调整逻辑：

app.controller('YourPageController', function($scope, $rootScope, $timeout) {
  // 监听翻译完成事件
  var unbindTranslationEvent = $rootScope.$on('$translateChangeSuccess', function() {
    // 保险起见可以加个$timeout，确保DOM彻底渲染完成（大部分情况不加也能行）
    $timeout(function() {
      // 获取目标div的正确高度
      var targetHeight = $('.your-translated-div').height();
      // 统一同行div的高度
      $('.same-row-divs').height(targetHeight);
    });

    // 如果只需要处理首次加载，用完可以解绑事件避免重复触发
    unbindTranslationEvent();
  });
});

为啥按钮触发能行？因为按钮点击时，翻译早就加载完了，DOM已经更新；而页面初始化时，翻译还在异步请求，你提前执行了高度获取，自然拿的是旧值。这个事件就是专门帮你等翻译加载完的信号～

方法二：针对单个翻译键使用$translate服务的Promise #

如果你的需求只是针对某几个特定的翻译文本，也可以直接调用$translate服务获取翻译内容，在Promise的then回调里处理：

app.controller('YourPageController', function($scope, $translate, $timeout) {
  // 获取指定翻译键的内容
  $translate('TRANSLATION_TEXT').then(function(translatedText) {
    // 翻译完成后，等待DOM更新
    $timeout(function() {
      var divHeight = $('.your-div').height();
      // 执行高度调整逻辑
    });
  });
});

不过这个方法更适合单个翻译键的场景，要是页面上有很多翻译文本，还是用第一种方法更省心。

避坑提醒 #

• 尽量别用$watch监听翻译文本变化，不仅性能差，还容易因为Angular的digest cycle触发多次，没必要。
• 如果你的div是用ng-repeat动态生成的，$translateChangeSuccess事件触发时，ng-repeat也已经渲染完成了，所以直接获取高度没问题。

这样调整后，你就能在翻译完成的第一时间拿到正确的DOM高度，不用再靠按钮触发啦！

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