CODEWITHSUNDEEP
angularjsdynamicmenutranslate
Prashant
Prashant

Reputation: 1

translate dynamic menus using angular js

I am using angular translate for localization in my current project. I am facing one issue with translating the dynamic menus. Here are the details of the implementation

I have a static menu embedded in the html page as below :

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

Angular translate is working fine here with the translated text. but just below this static menu, I have ul tag

In this ul tag I am loading dynamic menu created using javascript but with the link text as {{"INTRODUCTION" | translate}}.

But this is not getting translated and the link appears as {{"INTRODUCTION" | translate}} instead of translated text.

Do we need to do something for the dynamic menus ?

Upvotes: 0

Views: 549

Answers (1)

ttzn
ttzn

Reputation: 2623

You need $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 links your generated DOM to the scope, enabling processing of Angular features like expressions and filters.

Upvotes: 1

Related Questions