Using ng-bind-html is hiding words enclosed in "<>"

109 Views Asked by At

I'm trying to create a textbox that takes free text, and shows the text as output. For instance, if I enter "Angular", the result should be Angular. It should appear as is regardless of the characters being used.

For this, I'm using ng-bind-html. The issue I'm seeing is, whenever I add a term enclosed in "<>", the term doesn't appear as a whole. For example, if I enter "<Angular>" the result is "".

How can I display words enclosed in "<>" without using ng-bind-html, but getting the same results?

1

There are 1 best solutions below

1
SehaxX On

Possible solution is to encode/decode the tag like <Angular> if you just to want to show as text.

<body ng-app="bindHtmlExample">
  <div ng-controller="ExampleController">
    <p ng-bind-html="myHTML"></p>
  </div>
</body>

And in controller:

(function(angular) {
  'use strict';
angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.myHTML =
       'I am an <code>HTML</code>string with ' +
       '<a href="#">links!</a> and other <em>stuff</em>&lt;Angular&gt;';
  }]);
})(window.angular);