feat(translateDirective): teaches directive custom translate-value-* …

…attr

you're now able to add translate values via

```js
<ANY translate="TRANSLATION_ID"
     translate-value-foo="bar"
     translate-value-another="yay"
     ></ANY>
```

you're able to pass in a string or an interpolation so things like

```js
<ANY translate="TRANSLATION_ID"
     translate-value-foo="{{evaluate}}"
     ></ANY>
```

also work.

And yea this feature is progressive enhancement which means you can use it
along with `translate-values` as well without breaking your code. :)

Fixes #188

src/directive/translate.js

@@ -84,11 +84,18 @@ angular.module('pascalprecht.translate')
     scope: true,
     compile: function (tElement, tAttr) {
 
-      var translateValuesExist = (tAttr.translateValues && !angular.equals(tAttr.translateValues, ''));
-      var translateInterpolation = (tAttr.translateInterpolation) ? tAttr.translateInterpolation : undefined;
+      var translateValuesExist = (tAttr.translateValues) ?
+        tAttr.translateValues : undefined
+
+      var translateInterpolation = (tAttr.translateInterpolation) ?
+        tAttr.translateInterpolation : undefined;
+
+      var translateValueExist = tElement[0].outerHTML.match(/translate-value-+/i);
 
       return function linkFn(scope, iElement, iAttr) {
 
+        scope.interpolateParams = {};
+
         // 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.
@@ -104,14 +111,27 @@ angular.module('pascalprecht.translate')
           iAttr.$observe('translateValues', function (interpolateParams) {
             if (interpolateParams) {
               scope.$parent.$watch(function () {
-                scope.interpolateParams = $parse(interpolateParams)(scope.$parent);
+                angular.extend(scope.interpolateParams, $parse(interpolateParams)(scope.$parent));
               });
             }
           });
         }
 
+        if (translateValueExist) {
+          for (attr in iAttr) {
+            if (iAttr.hasOwnProperty(attr) && attr.substr(0, 14) === 'translateValue' && attr !== 'translateValues') {
+              (function () {
+                var attrName = attr;
+                iAttr.$observe(attr, function (value) {
+                  scope.interpolateParams[angular.lowercase(attrName.substr(14))] = value;
+                });
+              }());
+            }
+          }
+        }
+
         var updateTranslationFn = (function () {
-          if (!translateValuesExist) {
+          if (!translateValuesExist && !translateValueExist) {
             return function () {
               var unwatch = scope.$watch('translationId', function (value) {
                 if (value) {

test/unit/directive/translate.spec.js

@@ -426,4 +426,51 @@ describe('pascalprecht.translate', function () {
       expect(element.text()).toEqual('custom interpolation');
     });
   });
+
+  describe('custom translate-value-* attributes', function () {
+
+    beforeEach(module('pascalprecht.translate', function ($translateProvider) {
+      $translateProvider.translations({
+        'FOO': 'hello my name is {{name}}',
+        'BAR': 'and I\'m {{age}} years old',
+        'BAZINGA': 'hello my name is {{name}} and I\'m {{age}} years old.',
+        'YAY': 'hello my name is {{name}} and I\'m {{age}} years old. {{foo}}'
+      });
+    }));
+
+    beforeEach(inject(function (_$rootScope_, _$compile_) {
+      $rootScope = _$rootScope_;
+      $compile = _$compile_;
+
+      $rootScope.name = 'Pascal';
+      $rootScope.age = 22;
+    }));
+
+    it('should use custom translate-value-* attributes for variable replacement', function () {
+      element = $compile('<p translate="FOO" translate-value-name="Pascal"></p>')($rootScope);
+      $rootScope.$digest();
+      expect(element.text()).toEqual('hello my name is Pascal');
+      element = $compile('<p translate="BAR" translate-value-age="22"></p>')($rootScope);
+      $rootScope.$digest();
+      expect(element.text()).toEqual('and I\'m 22 years old');
+      element = $compile('<p translate="BAZINGA" translate-value-name="Pascal" translate-value-age="22"></p>')($rootScope);
+      $rootScope.$digest();
+      expect(element.text()).toEqual('hello my name is Pascal and I\'m 22 years old.');
+      element = $compile('<p translate="YAY" translate-value-name="Pascal" translate-value-age="22" translate-values=\'{ foo: "bar" }\'></p>')($rootScope);
+      $rootScope.$digest();
+      expect(element.text()).toEqual('hello my name is Pascal and I\'m 22 years old. bar');
+    });
+
+    it('should use custom translate-value-* attributes with interpolation', function () {
+      element = $compile('<p translate="FOO" translate-value-name="{{name}}"></p>')($rootScope);
+      $rootScope.$digest();
+      expect(element.text()).toEqual('hello my name is Pascal');
+      element = $compile('<p translate="BAR" translate-value-age="{{age}}"></p>')($rootScope);
+      $rootScope.$digest();
+      expect(element.text()).toEqual('and I\'m 22 years old');
+      element = $compile('<p translate="BAZINGA" translate-value-name="{{name}}" translate-value-age="{{age}}"></p>')($rootScope);
+      $rootScope.$digest();
+      expect(element.text()).toEqual('hello my name is Pascal and I\'m 22 years old.');
+    });
+  });
 });