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?

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

Answer 2

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