When incorporating "<" or ">" into a parameter value in Angular Translate and then showcasing it in a textarea with ng-model

In my Angular Translate string, I am using a parameter that can be in the form of <test>. However, when this translate is displayed in a textarea, it shows up as &lt;test&gt; instead of <test>. Is there a way to ensure it appears correctly as <test>?

The content of the Angular Translate file is:

"MESSAGE_KEY": "Display {someParam} displayed",

The message being used is:

var message = $filter('translate')('MESSAGE_KEY',
                {someParam: '<test>'},
                'messageformat');

When I input the message as the ng-model in the textarea, I see:

&lt;test&gt;

Please note:

  1. It is not feasible for us to use contenteditable for this purpose due to various constraints.
  2. We have configured the sanitization strategy as follows:
$translateProvider.useSanitizeValueStrategy('escapeParameters', 'sanitizeParameters');
javascriptangularjsangular-translate

Answer №1

Edit: I have now included a functional code snippet for you to run and see the sample in action.

var translations = {
  MESSAGE_KEY: "Display {{someParam}} displayed"
};

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

app.config(['$translateProvider', function ($translateProvider) {
  $translateProvider.translations('en', translations);
  $translateProvider.preferredLanguage('en');
  // Enable escaping of HTML
  $translateProvider.useSanitizeValueStrategy('sceParameters');
}]);

app.controller('Ctrl', ['$scope', '$filter', function ($scope, $filter) {
  var vm = this;
  vm.message = $filter('translate')('MESSAGE_KEY', {someParam: '<test>'}, 'messageformat');
}]);
<!doctype html>
<html ng-app="AsdDTestApp">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
  <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.17.0/angular-translate.js"></script>
</head>

<body>
  <div ng-controller="Ctrl as vm">
    Here is my input box:
      <input type="textarea" ng-model="vm.message">
  </div>
</body>
</html>

You should use 

$translateProvider.useSansanitizeValueStrategy('sceParameters');

instead of 

$translateProvider.useSanitizeValueStrategy('escapeParameters', 'sanitizeParameters');

sanitize: sanitizes HTML in the translation text using $sanitize

escape: escapes HTML in the translation

santizeParameters: sanitizes HTML in the values of the interpolation parameters using $sanitize

escapeParameters: escapes HTML in the values of the interpolation parameters

sce: wraps HTML in $sce.trustAsHtml(value)

sceParameters: wraps HTML in the values of the interpolation parameters in $sce.trustAsHtml(value)

find out more about escaping variables in angular translate

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to add a sub-heading into the side menu?

We are currently developing an application that utilizes ngCordova and we want to implement a side menu feature. The side menu has already been set up and you can see it below. https://i.stack.imgur.com/fiv39.png After adding the subheader, this is how t ...

angularjscordovaionic-framework

Unraveling the Mystery of @Input and @Output Aliases in Angular 2

After researching about the @Input() and @Output() decorators, I discovered that we have the option to use an alias instead of the property name for these decorators. For example: class ProductImage { //Aliased @Input('myProduct') pro ...

javascriptangulartypescript

Warning: Typescript is unable to locate the specified module, which may result

When it comes to importing an Icon, the following code is what I am currently using: import Icon from "!svg-react-loader?name=Icon!../images/svg/item-thumbnail.svg" When working in Visual Studio Code 1.25.1, a warning from tslint appears: [ts] Cannot ...

javascripttypescriptwebpacktslintsvg-react-loader

Interconnected Dropdown Menus

I've implemented the cascading dropdown jQuery plugin available at https://github.com/dnasir/jquery-cascading-dropdown. In my setup, I have two dropdowns named 'Client' and 'Site'. The goal is to dynamically reduce the list of si ...

javascriptphpjqueryjsonget

What is the reason behind the for of loop breaking within an async function instead of properly awaiting the execution?

Update 2: I made changes to use setTimeOut instead, which fixed the issue. Check out the accepted answer for details on what was causing the error. The code below is now functioning properly. async function getSlices() { const imgBuffs = await sliceImg ...

javascriptnode.jsasync-await

Enhancing Your Model with Additional Details using Angular Formly

I have been utilizing Angular Formly to display forms generated from the JSON response received from services. However, I have a few inquiries. Is it feasible to retrieve data in a field (templateOptions.label, for instance) to include in the model? ...

javascriptangularjsformsangular-formly

Designing an interactive region using HTML, CSS, and JavaScript

I recently created this code with some assistance: When I tried to format the code, it all ended up on one line and looked unreadable. To view the code properly, please visit this link: http://jsfiddle.net/QFF4x/ <div style="border:1px solid black;" ...

javascriptjqueryhtmlcss

Developing several sliders and ensuring they operate independently of each other

I am currently in the process of developing multiple sliders for a website that I am building. As I reach the halfway point, I have encountered a problem that has stumped me. With several sliders involved, I have successfully obtained the length or count ...

javascriptjqueryhtmlcssslider

Using PHP and JQuery to disable a button after the letter "U" is typed

I am looking for a way to disable the button when the term "U" (defined as Unable) appears. How can I achieve this? Below is the button in question: <input type="submit" class="form-control btn-warning" name="search" value="Search Data"></input& ...

javascriptphpjqueryhtmlforms

Sending back JSON arrays containing Date data types for Google Charts

One of my challenges involves using a 'Timelines' chart from Google Charts, which requires a JavaScript Date type when populating data. Here is my initial code snippet: var container = document.getElementById('divChart1'); var chart = ...

javascriptc#asp.netajaxjson

Conceal the element at all times

I'm facing a challenge with a paragraph element that is dynamically filled with content using Javascript. I need to hide the element whenever it doesn't have any text within it. However, I want to avoid using setTimeout or setInterval for this ta ...

javascriptjquerycsshtml

Creating Immersive Web Pages

I am currently generating a large amount of data in HTML for periodic reporting purposes. The table consists of approximately 10,000 rows, totaling around 7MB in size. As a result, when users try to open it, the browser sometimes becomes unresponsive due t ...

javascriptjavahtmljson

The dynamic concatenation of Tailwind classes is failing to have any effect, even though the full class name is being

I'm currently using Tailwind CSS within my Next.js project and I have a common method that dynamically returns the desired background color. However, despite adding the full class name, the background color is not displaying as expected. After reading ...

javascripttypescriptnext.jstailwind-css

Moving the input box down to the lower portion of the screen

My goal is to create an interactive input box that glides smoothly to the bottom of the screen when clicked by the user. However, the current implementation causes the input box to move too far down, requiring the user to scroll down in order to see it. H ...

javascriptnext.jstailwind-cssjsx

Include CLI input into JavaScript variable within the Webpack build process

I am currently attempting to incorporate a variable into my app.js file during the build process. For instance: //app.js var myvar = {{set_from_cli}}; Afterwards, I would like to execute something such as webpack -p --myvar='abc' which would pr ...

javascriptnpmwebpack

Building upon the preceding inquiry, a ReferenceError has occurred due to the object being undefined

After researching online, I came across a similar question marked as a duplicate that brought me to this link: How do I return the response from an asynchronous call?. Even though I couldn't find a solution in that thread, it seems like I may need to ...

javascriptjsonajax

Managing cookies in PHP and JavaScript can present challenges due to variations in how different browsers

Our website utilizes ExpressionEngine as the CMS and Magento's cart for e-commerce. I am encountering challenges with cookies and their accessibility in various sections. A cookie is used for storing search selections, allowing users to return to our ...

phpjavascriptcookies

Issue with jQuery hide() function in Internet Explorer 9

I need help with creating a hidden div that becomes visible when a user clicks a link. The code I have works in FF / IE7 / IE8 but not in IE9, where the div is always visible without any content. Any advice is appreciated! <script> $(document).r ...

javascriptjqueryinternet-explorer-9hide

Creating a functional dropdown form in Ruby On Rails: A Step-by-Step Guide

Having an issue with implementing a dropdown form in the navigation bar of my Rails application. The problem arises randomly - sometimes it works smoothly, while other times I have to refresh the page for it to function properly. The Rails version being u ...

javascriptjqueryhtmlruby-on-railsruby

Enhance the functionality of the custom transaction form in NetSuite by incorporating new actions

I'm currently working on incorporating a new menu option into the "Actions" menu within a custom transaction form in NetSuite. While I can successfully see my selection in the Actions Menu on the form, I'm running into an issue with triggering th ...

javascriptoraclenetsuite