Passing in string into angular

Question

In my function, I call an opening of a modal and the template of this modal is a PHP file. In that file, I have a div element which has the value of {{msg_text}}.

In my js file I set $scope.msg_text so that when the modal is opened, it shows the value that I set in the js.

This works fine but I am trying to add line breaks/paragraphs but it's just printing out the text instead of adding the spaces

How do I go about adding a break in between paragraphs by passing in a string?

The html is being escaped see: https://stackoverflow.com/questions/9381926/insert-html-into-view — Rens, Jun 29 '17 at 08:47

the_mishra · Answer 1 · 2017-06-29T09:01:31.953

1

pass the HTML as a string for ex:

var msg = "<p>My data</p></br><p>Next line</p>"

and in HTML use ng-bind-html attribute to render HTML string

<div ng-bind-html="msg_text"></div>

Use $sce.trustAsHtml() in the controller to convert the html string.

$scope.msg_text = $sce.trustAsHtml(msg);

edited Jun 29 '17 at 09:01

answered Jun 29 '17 at 08:46

the_mishra

813
9
24

This code will give the HTML unsafe error. VM535:27 Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context. – Ankit Agarwal Jun 29 '17 at 08:50
I am currently getting $sce is not defined – J.Do Jun 29 '17 at 08:57
1

pass `$sce` as a dependency in your controller – the_mishra Jun 29 '17 at 08:57

score 1 · Answer 2 · answered Jun 29 '17 at 08:50

You first need to add the line breaks \n in the value of your scope variable. lets say like this

$scope.msg_text = 'This is a sample text\n This is in a new line';

Then you simply need to use the <pre> tag to display your text as you needed

<pre>{{msg_text }}</pre>

Here is the link to JSFIDDLE for more detail

Passing in string into angular

2 Answers2