Nano Hash - криптовалюты, майнинг, программирование

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

Я использовал некоторый 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-контент отображался без выделения. Я ссылался на некоторые сообщения и использовал $compile в контроллере angularJs, но проблема все еще была одинаковый.

Контроллер AngularJs с $compile

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

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

Планкер

xml angularjs syntax-highlighting
25.03.2016

  • Вызываете ли вы Highlight API после установки переменной tepXml? Создайте плунжер для демонстрации. 25.03.2016
  • нет, я назвал это вверху страницы внутри <head> 25.03.2016
  • Насколько я могу судить, создать plunkr может быть простой проблемой. 25.03.2016

Ответы:


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>
25.03.2016
  • спасибо за ответ, но все так же. Данные не связываются. Я проверил с помощью проверки, и <pre> был пуст. 25.03.2016
  • Я создал плункер и обновил свой пост. Я просто поместил строку xml и протестировал ее. Но она работает нормально. Но когда я помещаю ее в свое веб-приложение, она не будет выделяться. Я использовал внутри modal-dialog , когда модель нажатия кнопки будет видна и должна показывать content.but другой атрибут может видеть имя файла xml и т. д., но не может видеть содержимое xml, которое пусто. 25.03.2016
  • и я использовал некоторые другие классы CSS также для моего другого компонента, может ли это быть проблемой? 25.03.2016
  • Спасибо за Plunker, но поскольку он работает, его будет сложно воспроизвести. Можете ли вы заставить плункер показать проблему или опубликовать некоторый код github, который реплицируется, чтобы помочь. 25.03.2016
  • спасибо за ответ. но мое веб-приложение действительно огромное, поэтому очень сложно создать плунжер, используя кусок кода из веб-приложения. 25.03.2016
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..