用于解析和替换自定义元素内容的 AngularJS 指令

Question

我想创建一个简单的 markdown 指令，它接受元素中的一些内容，解析它并用 html 替换它。

所以这样:

<markdown>#Heading</markdown>

或这个(其中 $scope.heading = '#Heading';)

<markdown>{{heading}}</markdown>

变成这样:

<h1>Heading</h1>

到目前为止我的指令(显然不完整!):

.directive('markdown', function () {
    return {
        restrict: 'E',
        replace: true,
        link: function ($scope, $element, $attrs) {
            // Grab contents
                var contents = /* How do I do this? */

                var newContents = Markdowner.transform(contents);

                // Replace <markdown> element with newContents
                /* How do I do this? */
        }
    }
})

我不确定如何获取指令的内容？我需要编译它吗？!

解析 Markdown 只是一个示例

Answer 1

给你!

Working Demo

app.directive('markdown', function() {
  return {
    restrict: 'E',
    transclude: true,
    compile: function(elem) {
      elem.replaceWith(Markdowner.transform(elem.html()));
    }
  }
});