How can I format (new lines) in bodyText of ui.bootstrap modal dialog

Question

I have in my AngularJS-script a ui.bootstrap confirmdlg:

var modalDlgOptions = {
  closeButtonText: "No",
  actionButtonText: "Yes",
  headerText: "my header text",
  bodyText: "my body text" 
};
confirmDlg.showModal({}, modalDlgOptions).then(function (result) {
  // todo something         
});

This works fine. But now I want to format the bodyText. I need new lines like this:

first line in my body text
second line in my body text
...
last line in my body text

When I use

bodyText: "first line in my body text<br>second line in my body text<br>...<br>last line in my body text";

or

bodyText: "first line in my body text&lt;br&gt;second line in my body text&lt;br&gt;...&lt;br&gt;last line in my body text";

I get

first line in my body text&lt;br&gt;second line in my body text&lt;br&gt;...&lt;br&gt;last line in my body text

in output of my dialog, but not new lines.

Is it possible to format the bodyText of the confirmDlg and how?

Thank you for your hints, Thomas

need to use `ng-bind-html` and include `ngSanitize` script in app...see docs — charlietfl, Mar 26 '16 at 18:59
A better solution, more maintainable, is to use a html partial and just place your HTML in there - it will make the code a lot more readable. See 'templateUrl' in the Modal control here - https://angular-ui.github.io/bootstrap/ — Gene, Mar 26 '16 at 20:37

score 0 · Answer 1 · answered Mar 29 '16 at 09:32

I found this solution:

var modalDlgOptions = {
  closeButtonText: "No",
  actionButtonText: "Yes",
  headerText: "my header text",
  bodyText: "" 
};

confirmDlg.showModal({}, modalDlgOptions).then(function (result) {
  // todo something         
}); 

setTimeout(function() { 
  var modalBody = document.getElementsByClassName("modal-body");
  modalBody[0].innerHTML = "first line in my body text<br />second line in my body text<br /> ... <br />last line in my body text";
}, 100);

Thanks for the comments, Thomas

score 0 · Answer 2 · answered Mar 30 '16 at 12:59

Improving the previous solution:

var waitForElementByClassName  = function(element, timeout, callBack) {
      window.setTimeout(function(){
        if (document.getElementsByClassName(element)[0]){
          callBack(document.getElementsByClassName(element)[0]);
        } else {
            waitForElementByClassName(element, timeout, callBack);
        }
      }, timeout);
};

waitForElementByClassName("modal-body", 50, function(element) {
        element.innerHTML = "first line in my body text<br />second line in my body text<br /> ... <br />last line in my body text";
        });

How can I format (new lines) in bodyText of ui.bootstrap modal dialog

2 Answers2