angularjs - A directive inside a directive

Question

Working on a directive to highlight <code> tags that are being outputted by a directive to render <markdown> tags.

The problem is that the <code> directive is never hit after the <markdown> directive runs. However the <code> directive runs on code tags that are not outputted from the <markdown> directive.

The Markdown directive

angular.module('App').directive "markdown", ->
  converter = new Showdown.converter()

  scope: true
  restrict: 'E'
  link: (scope, element, attrs) ->
    if attrs.markdown
      scope.$watch attrs.markdown, (newVal) ->
        html = converter.makeHtml(newVal)
        element.html(html)
    else
      redraw = ->
        html = converter.makeHtml(element.text())
        element.html(html)

        #### expecting the code directive to be trigger after this.

      scope.$on "$includeContentLoaded", redraw
      redraw()

Any thoughts?

Answer 1

AngularJS 不知道从你的 markdown 中编译任何东西。有两种方法可以编译这些东西。一种方法是使用嵌入，但我认为这不适用于您的用例。在您的情况下，您将需要从降价编译更改。为此，您使用 Angular 的 $compile 服务。

首先，将$compile服务注入您的指令中。然后设置后element.html(html)，试试这个：$compile(element.contents())(scope);