Is it possible to set up ng-bind-html so that it displays a string such as '</'?

Question

Is it possible to set up ng-bind-html so that it displays a string such as '</'?

When using ng-bind-html, the issue arises where it interprets '

' as a closing tag. This results in the text being sanitized and passed through, but when rendered in HTML, it appears as if nothing is displayed beyond the closing tag. For instance, 'I find <code></

is a good thing' only shows 'I find' on the webpage after binding the string.

(additional information) The root of the problem lies in the conflicting usage of html encoding and url encoding simultaneously. In our current setup, the input from the frontend looks like '</ is good'. This input undergoes encoding via a service, transforming it into '&lt%2F is good', then ultimately becoming '&lt/ is good' before insertion into the database. Upon retrieval, ng-bind-html interprets this as '</ is good'. The issue is further complicated by an input field with ng-model that receives this data as '$lt/ is good', mirroring the database content. To address this inconsistency, a replace() function is implemented in the controller before editing. While this serves as a temporary fix, uncertainties remain regarding its correctness. Even platforms like StackOverflow face similar challenges, evident in the grey background applied to '</' due to the rich text editor interpreting it differently. As a workaround, backtick escapes are utilized for this particular string within the text editor display.

javascript angularjs directive sanitize ng-bind-html

Answer 1

Answer №1

By changing ''<'' to ''<'', the expected results are achieved:

angular.module("app",[])
.controller("ctrl", function($scope,$sce) {
    $scope.text = "I find &lt;/ is a good thing";
    $scope.trust = $sce.trustAsHtml($scope.text);
})

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
   <h2>Using ng-bind-html</h2>
   <p ng-bind-html="trust"></p>
   <h2>Using ng-bind</h2>
   <p ng-bind="text"></p>
</body>

For further details, please visit

Answer 2

By changing ''<'' to ''<'', the expected results are achieved:

angular.module("app",[])
.controller("ctrl", function($scope,$sce) {
    $scope.text = "I find &lt;/ is a good thing";
    $scope.trust = $sce.trustAsHtml($scope.text);
})

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
   <h2>Using ng-bind-html</h2>
   <p ng-bind-html="trust"></p>
   <h2>Using ng-bind</h2>
   <p ng-bind="text"></p>
</body>

For further details, please visit

Is it possible to set up ng-bind-html so that it displays a string such as '</'?

Answer №1

Similar questions

What is the most efficient way to transform an array of objects into a compact string?

Strategies for disabling middle mouse button default behavior in Vue

Combining the devexpress dxDataGrid with Angular's $scope for seamless web development

Converting PHP array into a JavaScript object array

How come I am getting the desired section from my split string only after running the function twice?

Unlocking the secret dropdown menu with Java Selenium WebDriver

The multi-level dropdown feature in the BootStrap-4 navbar extends off the screen when the dropdown menu is opened

Angular Cross-Origin Resource Sharing problem: handling 'Access-Control-Allow-Origin' issue

Trouble with Angular 1.6 ng-repeat not showing search results

Control checkbox state based on Grandparent or parent selection in Vue

Continuously monitor the condition in my function

Conditional statements in jQuery for identifying a specific div based on its id

Troubleshooting Azure SDK: Tips for Displaying the Appropriate REST API

Select the correct nested div with the same name by clicking on it

Generating random indexes for the Answer button to render

Customizing error messages in react-hook-form-mui: A step-by-step guide

Establishing connectivity between an AngularJS application and Mongodb by utilizing NodeJS

The perplexity of ES6 Promises

Is it ever appropriate to make a service available at the root level?

Using jQuery or JavaScript to delay execution until the image width has been adjusted