Синтаксис выделенного фрагмента кода не будет отображаться с AngularJs ngBind

0

Я использовал некоторый синтаксический подсветка API для выделения фрагмента кода для моего веб-приложения. Для этого я использовал highlightjs. Я создал всплывающую модель и внутреннюю модель. Я поместил <pre> и когда модель открыта, она должна отображать мою выделенную строку xml.

Фрагмент кода HTML

<pre id="tepXml" ><code class="xml">{{tepXml}}</code></pre>

В контроллере AngularJs динамически привязывает значение к tepXml с сервера.

Контроллер AngularJs

...$promise.then(function(data){
    $scope.tepXml=data.xml;
}

Но проблема заключалась в том, что когда я открываю всплывающую модель, мое содержимое xml пустое. Пока что ничего не отображается. Но когда я удалил <code class="xml"></code> из <pre> xml content, будет отображаться без выделения. некоторые сообщения и использовали $compile в контроллере angularJs, но проблема была все та же.

Контроллер AngularJs с компиляцией $

 var target = angular.element($window.document.querySelector('#tepXml'));
 var myHTML = data.xml;
 target.append( $compile( myHTML )($scope) );

Если кто-то знает, где я ошибся, пожалуйста, укажите мне.

Plunker

  • 0
    Вы вызываете API подсветки после того, как переменная tepXml была установлена? Создать плункер для демо.
  • 0
    нет, я назвал это верхней частью страницы внутри <head>
Показать ещё 1 комментарий
Теги:
syntax-highlighting

1 ответ

1

Быстрый ответ:

$promise.then(function(data){
  $scope.tepXml=data.xml;
  // Call highlight api
  $timeout(function() {
    $('pre#tepXml code').each(function(i, block) {
    hljs.highlightBlock(block);  //or whatever the correct highlightjs call is.
  });
});

Чем больше Угловой способ делать вещи - это вызвать функцию jQuery из Angular, чтобы написать Директиву. Что-то вроде этого:

.directive("highlightCode", function($interval) {
    return {
        restrict: "A",
        scope: { highlightCode: "=" },
        link: function(scope, elem, attrs) {
          $scope.$watch('highlightCode', function() {
            $(elem).find('code').each(function(i, block) {
            hljs.highlightBlock(block);  //or whatever the correct highlightjs call is.
          });
        }
    }
});

Используется следующим образом:

<pre id="tepXml" highlight-code="tepXml"><code class="xml">{{tepXml}}</code></pre>
Поделиться
  • 0
    спасибо за ответ, но все равно. данные не проверяются bind.i с помощью inspect, и <pre> был пуст.
  • 0
    Я создал плункер и обновил свой пост. Я просто поместил строку XML и проверил ее. Но она отлично работает. Но когда я помещаю в свое веб-приложение, она не выделяется. Я использовал внутри modal-dialog когда модель нажатия кнопки была бы видимой и должна покажите content.but другой атрибут может видеть как имя файла xml и т. д., но не может видеть содержимое xml его пустым.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню