AngularJS Translate

Using translate to show text elements. Using angular directives with translate.

by walvekarnikhil

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/bower-angular-translate/2.0.1/angular-translate.min.js"></script>
<div ng-app="at">
  <div ng-controller="Ctrl">
      <span translate="TITLE"></span><br>
            <span translate="FOO"  translate-compile></span>
      <div translate="TOGGLE_LINK"  translate-compile translate-value-text="Toggle link"></div><br/>
      Here is updated value <strong>{{ toggle}}     </strong>
  </div>
</div>

CSS

.big{
    font-size: larger;
}

.highlight{
    background-color: #75CAF4;
}

JavaScript

var app = angular.module('at', ['pascalprecht.translate']);

app.config(function ($translateProvider) {
  $translateProvider.translations('en', {
    TITLE: 'Hello',
    FOO: 'This is a <b>Bold text</b>.',
    BUTTON_LANG_EN: 'english',
    BUTTON_LANG_DE: 'german',
      TOGGLE_LINK: 'Click on <a href="#" ng-click="toggleVal()">{{ text }}</a> to call angular directive'
  });
  $translateProvider.translations('de', {
    TITLE: 'Hallo',
    FOO: 'Dies ist ein Paragraph.',
    BUTTON_LANG_EN: 'englisch',
    BUTTON_LANG_DE: 'deutsch'
  });
  $translateProvider.preferredLanguage('en');
});

app.controller('Ctrl', function ($scope, $translate) {
    $scope.toggle = false;
    console.log('test');
    $scope.toggleVal = function() {
        $scope.toggle = !$scope.toggle;
    }
  $scope.changeLanguage = function (key) {
    $translate.use(key);
  };
});