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

Struggling with the loading of intricate attribute data into an array of arrays

I am struggling with loading different data attributes into an array of arrays. I have managed to load single data attributes into the dataArray, but when it comes to the data-size which contains groups of arrays in string format, I am facing difficulties ...

javascriptjqueryhtml

Angular.js and D3 - The Perfect Combination for Dynamic Data Visualization!

Having some trouble creating a chart with angular.js. The chart is not appearing on the page when using rout.js, but it works fine without it. Here's my code: var myapp = angular.module('myapp', ['angularCharts']); function D3 ...

javascriptangularjsd3.js

a guide on grouping markers with angularjs and leaflet

Working on my project with AngularJS and Leaflet, I noticed that having a lot of markers on the map can make it look cluttered. I am interested in using marker clustering with Angular, so I tried to follow the instructions from this guide. However, I enc ...

angularjsleafletopenstreetmap

AngularJS SmartyUI position not dynamically updating on SmartyStreets plugin

In my angularJS application, I am utilizing SmartyStreets' LiveAddress for address validation and autofilling two fields in a form. After the user submits the form, a message (either success or failure) is displayed in a div above the form. However, t ...

javascriptangularjssmartystreets

Having trouble implementing styles for an element selected using the document.getElementsByClassName() method

In order to adjust the style of a dropdown menu, I need to change its top value to align it properly. The element is being generated by Drupal (a CMS tool) and is configured with classes for styling purposes in the admin view where content is authored. How ...

javascripthtmljquerycss

Angular service unable to maintain data continuity across multiple controllers

I am facing an issue while attempting to set the title in controller1 using a service and then accessing the updated title in controller2. The function sharedProperties.setTitle(title) works perfectly fine in controller1, however, in controller2, I keep g ...

htmlangularjsangularjs-scopeangular-services

Using NodeJS to trigger a function based on when the UTC server time matches the time entry stored in a Firebase database

Is there a way to activate a function in response to the server's UTC time matching the alertTime recorded in the Firebase database? This feature needs to be able to monitor both past and new entries, ensuring that the function is only triggered when ...

javascriptnode.jsfirebasefirebase-realtime-database

Encountering an error: Module missing after implementing state syntax

My browser console is showing the error message: Uncaught Error: Cannot find module "./components/search_bar" As I dive into learning ReactJS and attempt to create a basic component, this error pops up. It appears after using the state syntax within my ...

javascriptreactjs

Issue with updating nested child object reference in Redux state input value

I have a function in redux that updates an object with a specified path and value. The inputs on my page are based on the values in the object stored in state. Whenever the listingObj is modified in redux, I want the DOM to automatically refresh. This i ...

javascriptreactjsreduxreact-reduxreducers

Ensure a button is automatically highlighted within an active class script

I have created a set of buttons that allow users to change the font family of the text. I would like the border and text color to update automatically when a specific option is selected. Currently, the JavaScript code works well, but when the page first l ...

javascriptcssonclick

Run a function once the ajax request has been completed

Despite seeing similar queries on SO multiple times (such as here), I couldn't find a solution that worked for me. I am using ajax to import JSON data for a slick slider. The slick slider needs to be initialized after the completion of the ajax impor ...

javascriptajax

Avoid inputting numbers and special characters

In my coding work, I have crafted a function that detects the key pressed by the user through an event. NameValidation(e){ if(!e.key.match(/^[a-zA-Z]*$/)) { e.key = ''; console.log(e.key); } }, This function essentia ...

javascriptvue.jsdom-events

The field 'XXX' is not a valid property on the type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>'

When creating a Vue component with TypeScript, I encountered an error message in the data() and methods() sections: Property 'xxx' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>& ...

javascriptnode.jstypescriptvue.jsvue-component

Executing Selenium tests: utilizing the webdriver.wait function to repeatedly call a promise

Currently, I am using Selenium ChromeDriver, Node.js, and Mocha for testing purposes... I am facing a dilemma at the moment: The driver.wait function seamlessly integrates with until. I have a promise, which we'll refer to as promiseA. This pro ...

javascriptnode.jsseleniumpromiseselenium-chromedriver

You won't be able to view over 15 KML layers on a page that relies on Google Maps API

I've encountered an unusual issue: I need to create multiple KML layers from separate KML files and display them on a single map window. The number of files ranges from just a couple to less than fifty. Currently, my code works perfectly when given 1, ...

javascriptgoogle-mapsgoogle-maps-api-3kml

Show only future events using JavaScript and XML

I am facing a challenge with an interactive map that showcases event dates in various regions of the United States. While the map successfully extracts data from an XML document and displays it, I am encountering an issue where events from 2014 are not bei ...

javascriptjquerydateif-statement

Tips for repairing damaged HTML in React employ are:- Identify the issues

I've encountered a situation where I have HTML stored as a string. After subsetting the code, I end up with something like this: <div>loremlalal..<p>dsdM</p> - that's all How can I efficiently parse this HTML to get the correct ...

javascripthtmlreactjsnext.js

I'm curious why my background generator is only altering a portion of the background instead of the entire thing

I've been attempting to create a JavaScript random background changer, but I'm encountering some challenges. The main issue is that instead of changing the entire page's background, it only alters a strip of it. Additionally, I'm curiou ...

javascripthtmljquerycssdom

Having trouble clicking or interacting with JavaScript using Selenium and Python

Issue: Unable to interact with elements on a specific webpage after opening a new tab. Using WebDriver Chrome. I can successfully navigate the initial webpage until I click a link that opens a new tab, at which point I am unable to perform any actions. ...

javascriptpython-3.xseleniumselenium-webdriver

Ways to retrieve dropdown values

My HTML code is as follows: <select class="height_selected"> <option>Select Height</option> <option ng-model="userHeight" ng-init="1" value="1">123 cm</option> <option ng-model="userHeight" ng-init="2" v ...

javascriptphpjqueryhtmlangularjs