CODEWITHSUNDEEP
javascriptangularjs
Dan Kanze
Dan Kanze

Reputation: 18595

compile directive inside directive AngularJS

I am trying to use a HighlightJS directive on <pre> blocks rendered by a Markdown directive.

Here is an plunker recreating the problem:
http://plnkr.co/edit/qZlMkjNZglV453caNphy?p=preview

In this example:

<btf-markdown>
#Markdown directive
<pre hljs>

    angular.forEach($scope.items,function(item){
      console.log(item);
    });
</pre>
</btf-markdown>

I would expect the <pre> block to get parsed by hljs but does not.

Do I have to manually invoke the compilation of the inner directive?

Upvotes: 1

Views: 533

Answers (2)

Christian Bonato
Christian Bonato

Reputation: 1306

I would like to point out Angular Marked, which is based on btford work.

  • You can use it as a service, which means you can parse strings in controllers, directives, for subsequent processing,
  • It supports some Github Flavored Markdown, which allows for easy table creation, see here.

Upvotes: 0

KayakDave
KayakDave

Reputation: 24676

Within btford.markdown your element.html(html); is overwriting the hljs

So instead of:

var html = converter.makeHtml(element.text());
element.html(html);

I think you'd prefer: 

var html = converter.makeHtml(element.html());
element.html(html);

switching element.text() with element.html()

So you're converting the whole html element (including your hljs - which isn't in element.text()).

Here's the updated plunker: http://plnkr.co/edit/cURJ1QRfJRheOxTvYc1p?p=preview

Upvotes: 1

Related Questions