compile directive inside directive AngularJS

Question

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?

KayakDave · Accepted Answer · 2013-11-13 17:26:34Z

1

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

edited Nov 13, 2013 at 17:26

answered Nov 13, 2013 at 16:48

KayakDave

24.7k3 gold badges68 silver badges68 bronze badges

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

3 Comments

Dan Kanze Over a year ago

Although this enables the hljs directive to compile, the btf-markdown directive falls through. Perhaps there was something else in the plunker you forked that made these two play nice together?

KayakDave Over a year ago

Nope- you're right. I think I see what you're doing more clearly now. I updated the answer- see if this is closer.

Dan Kanze Over a year ago

I have a good follow up question here stackoverflow.com/questions/19983086/…

Christian Bonato · Accepted Answer · 2014-05-21 13:50:15Z

0

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.

answered May 21, 2014 at 13:50

Christian Bonato

1,30612 silver badges27 bronze badges

Collectives™ on Stack Overflow

compile directive inside directive AngularJS

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related