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?

• Rens: The html is being escaped see: stackoverflow.com/questions/9381926/insert-html-into-view

Answer 1

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

Answer 2

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

• Ankit Agarwal: This code will give the HTML unsafe error. VM535:27 Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.
• J.Do: I am currently getting $sce is not defined
• the_mishra: pass $sce as a dependency in your controller