使用 Angular js 翻译动态菜单答案

【问题标题】：translate dynamic menus using angular js使用 Angular js 翻译动态菜单
【发布时间】：2015-10-28 21:24:11
【问题描述】：

我在当前项目中使用角度翻译进行本地化。我在翻译动态菜单时遇到了一个问题。以下是实现的细节

我在 html 页面中嵌入了一个静态菜单，如下所示：

<a>{{'INTRODUCTION' | translate}}</a>

Angular 翻译在这里与翻译后的文本一起工作得很好。但就在这个静态菜单下方，我有 ul 标签

在这个 ul 标记中，我正在加载使用 javascript 创建的动态菜单，但链接文本为 {{"INTRODUCTION" | translate}}。

但这没有得到翻译，链接显示为{{"INTRODUCTION" | translate}}，而不是翻译文本。

我们需要为动态菜单做点什么吗？

【问题讨论】：

标签： angularjs dynamic menu translate

【解决方案1】：

你需要$compile：

var myApp = angular.module('myApp',[]);

myApp.directive('test', function($compile) {
    return function($scope, element, attrs) {
        $scope.buddy = 'Tom';
        
        var paragraph = $('<p>Hello, {{ buddy }}</p>');
      
        var uncompiled = paragraph.clone();
        var compiledParagraph = $compile(paragraph)($scope);
        
        element.append(uncompiled);
        element.append(compiledParagraph);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>

<body ng-app="myApp">
    <div test>
    </div>
</body>

$compile 将您生成的 DOM 链接到范围，从而可以处理 Angular 功能，如表达式和过滤器。

【讨论】：

@Prashant 没问题，如果你觉得有用，记得采纳答案。