Question

我在当前项目中使用angular translate进行本地化。我正面临着翻译动态菜单的一个问题。以下是实施细节

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

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

Angular翻译在这里与翻译文本一起正常工作。但是在这个静态菜单下面，我有ul标签

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

但这不会被翻译，链接显示为{{"INTRODUCTION" | translate}}而不是翻译文本。

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

Answer 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功能。

使用角度js翻译动态菜单

1 个答案: