Pass html tag to angularjs variable from controller

Question

I have this validations which I am trying to do every time user enters a wrong email. And I am handling it via variable in my html like this:

 <p class="error"  ng-show="!!user.errorText || form.$submitted">
    {{user.errorText}}
 </p>

So far everything is fine as I am replacing the errorText with text values from my controller like this:

$scope.user.errorText = "Email is incorrect"

Now, I actually wanted to insert a html tag like <a> . For example:

$scope.user.errorText = "Email is incorrect . <a href='#'>View Examples</a>"

But the vaiable {{user.errorText}} is always redering it as text. Any help on how can I render both tags and text would be helpful. Also, I can't replace {{user.errorText}} in html as it has already been in use for n number of validations and the scenario of using a html tag is rare.

Answer 1

You can use ng-bind-html directive to bind html text (it will work also for simple text):

<p ng-bind-html="user.errorText"></p>

https://docs.angularjs.org/api/ng/directive/ngBindHtml

If angular-sanitize.js is not included in the application, then the following error will show up:

angular.min.js:1 Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.

In that case, $sce service needs to be used like this:

$scope.user.errorText = $sce.trustAsHtml("Email is incorrect . <a href='#'>View Examples</a>");