feat(directive): add possibility to mix translation interpolation wit…

…h other text in element body

This adds possiblity to use like this:
```html
<span translate>Hello {{translation_id}}!</span>
```
Given that $scope.translation_id = "CHARACTER_NAME", which translates into "Muppet", this would become
```html
<span translate>Hello Muppet!</span>
```

Closes #461

src/directive/translate.js

@@ -91,16 +91,27 @@ angular.module('pascalprecht.translate')
 
       var translateValueExist = tElement[0].outerHTML.match(/translate-value-+/i);
 
+      var interpolateRegExp = "^(.*)(" + $interpolate.startSymbol() + ".*" + $interpolate.endSymbol() + ")(.*)";
+
       return function linkFn(scope, iElement, iAttr) {
 
         scope.interpolateParams = {};
+        scope.preText = "";
+        scope.postText = "";
 
         // Ensures any change of the attribute "translate" containing the id will
         // be re-stored to the scope's "translationId".
         // If the attribute has no content, the element's text value (white spaces trimmed off) will be used.
         iAttr.$observe('translate', function (translationId) {
           if (angular.equals(translationId , '') || !angular.isDefined(translationId)) {
-            scope.translationId = $interpolate(iElement.text().replace(/^\s+|\s+$/g,''))(scope.$parent);
+            var interpolateMatches = iElement.text().match(interpolateRegExp);
+            if (angular.isArray(interpolateMatches)) {
+              scope.preText = interpolateMatches[1];
+              scope.postText = interpolateMatches[3];
+              scope.translationId = $interpolate(interpolateMatches[2])(scope.$parent);
+            } else {
+              scope.translationId = iElement.text().replace(/^\s+|\s+$/g,'');
+            }
           } else {
             scope.translationId = translationId;
           }
@@ -137,7 +148,7 @@ angular.module('pascalprecht.translate')
           if (!successful && typeof scope.defaultText !== 'undefined') {
             value = scope.defaultText;
           }
-          iElement.html(value);
+          iElement.html(scope.preText + value + scope.postText);
           var globallyEnabled = $translate.isPostCompilingEnabled();
           var locallyDefined = typeof tAttr.translateCompile !== 'undefined';
           var locallyEnabled = locallyDefined && tAttr.translateCompile !== 'false';

test/unit/directive/translate.spec.js

@@ -110,6 +110,33 @@ describe('pascalprecht.translate', function () {
         expect(element.text()).toBe('foo');
       });
 
+      it('should return translation prepended by additional content when passed as interpolation', function () {
+        $rootScope.translationId = 'TRANSLATION_ID';
+        element = $compile('<div translate>abc{{translationId}}')($rootScope);
+        $rootScope.$digest();
+        expect(element.text()).toBe('abcfoo');
+      });
+
+      it('should return translation appended by additional content when passed as interpolation', function () {
+        $rootScope.translationId = 'TRANSLATION_ID';
+        element = $compile('<div translate>{{translationId}}def')($rootScope);
+        $rootScope.$digest();
+        expect(element.text()).toBe('foodef');
+      });
+
+      it('should return translation surrounded by additional content when passed as interpolation', function () {
+        $rootScope.translationId = 'TRANSLATION_ID';
+        element = $compile('<div translate>abc{{translationId}}def')($rootScope);
+        $rootScope.$digest();
+        expect(element.text()).toBe('abcfoodef');
+      });
+
+      it('should return translation surrounded by additional content when passed as interpolation with literal', function () {
+        element = $compile('<div translate>abc{{"TRANSLATION_ID"}}def')($rootScope);
+        $rootScope.$digest();
+        expect(element.text()).toBe('abcfoodef');
+      });
+
       it('should return translation if translation id exists and if its passed surrounded by white space', function () {
         element = $compile('<div translate>  TRANSLATION_ID  </div>')($rootScope);
         $rootScope.$digest();