Как я могу отформатировать (новые строки) в bodyText модального диалога ui.bootstrap

Question

Как я могу отформатировать (новые строки) в bodyText модального диалога ui.bootstrap

0

У меня в моем AngularJS-скрипте есть 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         
});

Это прекрасно работает. Но теперь я хочу отформатировать bodyText. Мне нужны новые строки:

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

Когда я использую

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

или

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

я получил

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

в выводе моего диалога, но не в новых строках.

Можно ли форматировать bodyText подтвержденияDlg и как?

Спасибо за ваши советы, Томас

Thomas Rademacher 26 март 2016, в 20:12

Источник

0

Вы пробовали   или заключили строку в 
Konkko 26 март 2016, в 18:56
2

нужно использовать ng-bind-html и включить скрипт ngSanitize в приложение ... см. документацию
charlietfl 26 март 2016, в 18:59
1

Лучшее решение, более удобное в обслуживании, состоит в том, чтобы использовать частичку html и просто поместить туда свой HTML - это сделает код намного более читабельным. Смотрите 'templateUrl' в Модальном контроле здесь - angular-ui.github.io/bootstrap
Gene 26 март 2016, в 20:37

Показать ещё 1 комментарий

Теги:

javascript

angularjs

ui.bootstrap

showmodaldialog

2 ответа

Ещё вопросы

Вы пробовали   или заключили строку в 
нужно использовать ng-bind-html и включить скрипт ngSanitize в приложение ... см. документацию
Лучшее решение, более удобное в обслуживании, состоит в том, чтобы использовать частичку html и просто поместить туда свой HTML - это сделает код намного более читабельным. Смотрите 'templateUrl' в Модальном контроле здесь - angular-ui.github.io/bootstrap

Thomas Rademacher · Answer 1 · 2016-03-30T10-11-00.000Z

Улучшение предыдущего решения:

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

Thomas Rademacher · Answer 2 · 2016-03-29T06-48-00.000Z

Я нашел это решение:

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

Спасибо за комментарии, Томас