Pass html tag to angularjs variable from controller [duplicate]

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.

Bill P · Accepted Answer · 2020-01-29 16:07:32Z

2

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>");

edited Jan 29, 2020 at 16:07

answered Jan 28, 2020 at 19:29

Bill P

3,61610 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pass html tag to angularjs variable from controller [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related