Использование ng-bind-html Angular с HTML по умолчанию

Я пишу веб-сайт, на котором я добавляю зачарованный опыт использования Angular. Сайт работает без JS, но для приличных браузеров контент будет динамически вставляться в виде фрагментов HTML (без внешнего языка шаблонов).

У меня есть блок, который будет представлять содержимое страницы и должен изначально содержать html-контент с сервера, а затем заменяться фрагментом HTML из функции Ajax.

Я надеялся использовать ng-bind-html с содержимым по умолчанию, однако, как только Angular загружается, этот элемент очищается и заменяется содержимым переменной pageContent, к которой привязывается ng-bind-html (как и ожидалось).

Есть ли способ остановить ng-bind-html от удаления содержимого по умолчанию, пока переменная не будет обновлена ​​в контроллере?

Другой вариант — собрать содержимое элемента перед загрузкой Angular, но я не считаю это очень элегантным решением.

Пример кода с моей страницы:

<div id="content" ng-bind-html="pageContent">

    <h2>Home page</h2>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>

</div>

В идеале содержимое HTML в div #content должно оставаться на странице до тех пор, пока я не обновлю переменную $scope.pageContent. Любые идеи?


javascript dom angularjs ng-bind-html
person Alex    schedule 17.03.2014    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Я думаю, что то, что вы хотите, должно быть сделано следующим образом:

<div ng-if="pageContent" id="content" ng-bind-html="pageContent"></div>
<div ng-if="!pageContent">
    <h2>Home page</h2>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>

</div>

или с ngSwitch

Я думаю, вы должны иметь возможность установить display: none для элемента и удалить его, когда pageContent доступен!

person Jeanluca Scaljeri    schedule 17.03.2014
comment
Это действительно хорошее решение. Я собираюсь подождать, чтобы посмотреть, есть ли что-то родное, что я упускаю, иначе я отмечу это как правильный ответ. - person Alex; 17.03.2014

arrow_upward
1
arrow_downward

Написание пользовательской директивы, которая расширяет ng-bind-html некоторыми дополнительными функциями, может быть решением...

вот PLUNKER, который я создал для использования ng-bind-html-unsafe, теперь я редактирую его, чтобы дождаться изменения атрибута заменить строку html предыдущим содержимым...

person Poyraz Yilmaz    schedule 17.03.2014