Syntax highlighted code snippet wont display with AngularJs ngBind

Question

I used some Syntax highlighting API for highlighting code snippet for my web application.To do that i have used highlightjs .I created popup model and inside model i have put <pre> tag and when model open it should display my highlighted xml string.

HTML Code snippet

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

In AngularJs controller dynamically bind the value to tepXml from server.

AngularJs controller

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

But the problem was that when i open popup model my xml content is empty.nothing display anything.But when i removed <code class="xml"></code> from <pre> xml content would display with out highlighting.I referred some posts and used $compile in angularJs controller but the problem was still the same.

AngularJs controller with $compile

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

If someone knows where i went wrong please point me out.

Plunker

Are you calling the highlight api after the tepXml variable has been set? Create a plunker to demo. — Gene
– Gene, Commented Mar 25, 2016 at 7:23
Create plunkr, might be simple problem, as far as I can tell. — dfsq
– dfsq, Commented Mar 25, 2016 at 7:36

Community · Accepted Answer · 2017-05-23 11:50:38Z

1

The quick answer is to do:

$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.
  });
});

The more Angular way of doing things is to call a jQuery function from Angular is to write a Directive. Something like this:

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

Used like this:

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

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Mar 25, 2016 at 7:45

Gene

6164 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

gihan-maduranga Over a year ago

thanks for reply but still the same.data wont bind.i checked using inspect and <pre> was empty.

gihan-maduranga Over a year ago

i created a plunker and updated my post.i just simply put xml string and tested it.but its works fine.but when i put into my web app it wont highlight.I used inside modal-dialog when button click model would visible and must show the content.but other attribute can see like xml file name etc...but cant see xml content its empty.

gihan-maduranga Over a year ago

and i used some other CSS classes also for my other component could it be a problem?

Gene Over a year ago

Thanks for the Plunker - but since it's working it's going to be difficult to replicate. Can you make the plunker show the problem or publish some github code that replicates to help.

gihan-maduranga Over a year ago

thanks for the reply.but my web app is really a huge one so its really hard to create a plunker using peace of code from web app.

Collectives™ on Stack Overflow

Syntax highlighted code snippet wont display with AngularJs ngBind

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related