Как вы предотвращаете добавление закрывающих тегов в ng-bind-html? - PullRequest
Новая
       25

Как вы предотвращаете добавление закрывающих тегов в ng-bind-html?

0 голосов
/ 01 июня 2018

У меня есть два фрагмента HTML, которые мне нужно вывести. Первый - это открывающий тег div, представляющий мой заголовок, второй - закрывающий тег div, который будет представлять нижний колонтитул.Между ними у меня есть динамический контент, который я не могу контролировать.Я хочу, чтобы headerHTML включал открывающий div и CSS-класс и нижний колонтитул, чтобы закрыть div заголовка, чтобы обернуть весь контент, который будет между ними. 

<ng-bind-html ng-bind-html="headerHTML" />

<ng-bind-html ng-bind-html="footerHTML" />

Так что после рендеринга это должно выглядеть так: 

<div class="myCSSClass">
   A bunch of dynamic content created between the two binds
</div>

Однако происходит следующее: 

<div class="myCSSClass">
</div>
   A bunch of dynamic content created between the two binds
<div>
</div>

Проблема в том, что он автоматически добавляет закрывающий тег для headerHTML, когда он не является частью содержимого.Это приводит к тому, что страница отображается неправильно.Есть ли другой способ добавить контент HTML без добавления закрывающего тега?

1 Ответ

0 голосов
/ 02 июня 2018

Под капотом директива ng-bind-html использует Node.appendChild.Это означает, что он должен прикрепить полный элемент.Если в HTML отсутствует закрывающий тег, браузер должен закрыть элемент.Так работает DOM.Браузер не может разделить открывающие и закрывающие теги между двумя .appendChild операциями.

Чтобы сделать то, что вы хотите, используйте компонент, который включает содержимое: 

app.component("myComponent", {
    bindings: {
        headerHtml: '<',
        footerHtml: '<',
    },
    template: `
        <div class="myCSSClass">
            <div ng-bind-html="$ctrl.headerHtml"></div>
            <div ng-transclude></div>
            <div ng-bind-html="$ctrl.footerHtml"></div>  
       </div>
    `,
    transclude: true
});

Использование: 

<my-component header-html="headerHTML" footer-html="footerHTML">
   This content will be sandwiched between header and footer.
</my-component>

Для получения дополнительной информации см.

...