Angular directive example

HTML

<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
<div ng-app="myapp" ng-controller="myctrl">
    
    <p>Info:{{info}}</p>
    <p>T1:{{ translate("key1") }}</p>
    <p>T2:{{ translate("key2") }}</p>
    <p>T3:{{ translate("key3") }}</p>
    <phonenumber number="'1234567890'"></phonenumber>
    
    <!--<interpret text="translate('key3')">  </interpret>-->
    I1:<interpret text="Test String"></interpret> <br />
    I2:<interpret text="<b>Bold String</b>">  </interpret>
    
</div>

JavaScript

var myapp = angular.module("myapp", []);

myapp.controller("myctrl", function($scope, translationService) {
    $scope.info = "Test info string to see if angular works";
    $scope.translate = function(keyw) {
        return translationService.translateWithService(keyw);
    };
});

myapp.factory("translationService", function() {
    var translations = {
        "key1": "trans1",
        "key2": "<i>trans2</i>",
        "key3": "<b>trans3</b>"
    };
    return {
        translateWithService: function(key) {
            return translations[key];
        }
    };
});

myapp.directive("interpret", function() {
    return {
        restrict: "E",
        scope: {
            text: "@"
        },
        
        template: '<span ng-bind-html-unsafe="text"></span>'
    }
});


myapp.directive("phonenumber", function() {
    return {
        restrict: "E",
        scope: {
            number: "@"
        },
        
        template: '<span>{{number | slice:0:6}}</span>'
    }
});