angular-translate切换默认语言后控制器翻译失效，求正确实现方式

这个问题我之前帮不少开发者排查过——核心原因很明确：你在控制器里用的$translate('HEADLINE').then(...)是一次性的异步调用，只会在代码执行时获取当前语言的翻译值；当你切换默认语言后，这段代码不会自动重新执行，所以$scope.headline自然不会更新。而模板里的{{'TRANSLATION_ID' | translate}}之所以正常，是因为translate过滤器内部已经监听了angular-translate的语言变化事件，会自动触发重新翻译。

下面给你几种靠谱的解决方案，按推荐程度排序：

1. 监听语言切换事件（最推荐，兼容所有加载场景） #

通过监听$translateChangeSuccess事件，每次语言切换完成后重新获取翻译值，同时初始化时先执行一次：

// 页面初始化时先获取初始语言的翻译
$translate('HEADLINE').then(function(headline) {
  $scope.headline = headline;
});

// 监听语言切换成功事件，每次切换都更新翻译值
$rootScope.$on('$translateChangeSuccess', function() {
  $translate('HEADLINE').then(function(headline) {
    $scope.headline = headline;
  });
});

这种方法不管你是预加载翻译文件还是异步加载，都能保证获取到正确的翻译值，不会出现返回键名的情况。

2. 使用$translate.instant（适合预加载翻译的场景） #

如果你的翻译文件是提前预加载完成的（比如用staticFilesLoader在应用启动时就加载了所有语言包），可以用同步的$translate.instant方法，同样结合事件监听：

// 初始化赋值
$scope.headline = $translate.instant('HEADLINE');

// 语言切换时更新
$rootScope.$on('$translateChangeSuccess', function() {
  $scope.headline = $translate.instant('HEADLINE');
});

⚠️ 注意：如果翻译文件是异步加载的，$translate.instant可能会直接返回翻译键名（因为翻译还没加载完成），这种情况就不适合用这个方法，还是用第一种方案更稳妥。

3. 在控制器中使用translate过滤器 #

你也可以直接在控制器里调用translate过滤器，逻辑和上面类似，需要监听语言变化事件：

// 注入$filter服务
var translateFilter = $filter('translate');

// 初始化翻译
$scope.headline = translateFilter('HEADLINE');

// 语言切换时更新
$rootScope.$on('$translateChangeSuccess', function() {
  $scope.headline = translateFilter('HEADLINE');
});

这个方法和第一种本质上区别不大，只是调用方式不同，按需选择即可。

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