使用angular js翻译动态菜单

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

的详细信息

我有一个静态菜单嵌入在html页面如下:

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

Angular translate在翻译后的文本中工作得很好。但是在这个静态菜单下面，我有一个ul标签

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

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

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

您需要$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的特性，比如表达式和过滤器。

相关内容

最新更新

热门标签：