escapeParameters sanitize strategy transform booleans to string

[afitiskin]

Subject of the issue

When using escapeParameters sanitize strategy all boolean values are transformed to strings. So if you pass following object:

{
  one: true, // Boolean
  two: false, // Boolean
}

to angular-translate-values, it will be transformed to:

{
  "one": "true", // String
  "two": "false", // String
}

Your environment

• version of angular-translate is 2.15.1
• version of angular is 1.6.4
• every browser and version

Steps to reproduce

1. Use escapeParameters strategy:

   $translateProvider.useSanitizeValueStrategy('escapeParameters');

2. Provide some data in controller:

   this.data = { flag: false };
   

3. Pass this data as translate-values to translate directive in template:

   <span translate="SOME_KEY" translate-values="{ data: $ctrl.data }"></span>

4. Define SOME_KEY in dictionary:

   SOME_KEY: "{{ data | json }}"

5. See the result:

   { "flag": "false" } // boolean has been converted to string

Expected behaviour

Booleans should not be converted to strings. As I see in source code of mapInterpolationParameters (in /src/service/sanitization.js) there are special conditions for dates, objects, arrays and numbers, but booleans are missed.

Actual behaviour

Currently all booleans are converted to strings, so filters in translations can work wrong, for example:

// config
$translateProvider.useSanitizeValueStrategy('escapeParameters');

// controller
this.data = { flag: false };

// template
`<span translate="SOME_KEY" translate-values="{ data: $ctrl.data }"></span>`

// dictionary 
{
  SOME_KEY: "{{ data | isEnabled }}"
}

// filters
angular.filter('isEnabled', () => (data) => data.flag ? 'Enabled' : 'Disabled');

// result:
"Enabled" // instead of "Disabled"

[afitiskin]

There is simple fix for the problem: we need to change mapInterpolationParameters in /src/service/sanitization.js to this:

var mapInterpolationParameters = function (value, iteratee, stack) {
    // simple check if value is Boolean
    if (value === true || value === false) {
      return value;
    }
    // following is the same as before
    if (angular.isDate(value)) {
      return value;
    } else if (angular.isObject(value)) {
      var result = angular.isArray(value) ? [] : {};

      if (!stack) {
        stack = [];
      } else {
        if (stack.indexOf(value) > -1) {
          throw new Error('pascalprecht.translate.$translateSanitization: Error cannot interpolate parameter due recursive object');
        }
      }

      stack.push(value);
      angular.forEach(value, function (propertyValue, propertyKey) {

        /* Skipping function properties. */
        if (angular.isFunction(propertyValue)) {
          return;
        }

        result[propertyKey] = mapInterpolationParameters(propertyValue, iteratee, stack);
      });
      stack.splice(-1, 1); // remove last

      return result;
    } else if (angular.isNumber(value)) {
      return value;
    } else if (!angular.isUndefined(value) && value !== null) {
      return iteratee(value);
    } else {
      return value;
    }
  };

But, this way will work wrong with new Boolean() values. To cover new Boolean() we have to use something like lodash.isBoolean

[afitiskin]

PR is merged, so I think we can close the issue