获取编辑器中显示的原始AngularJS“innerHTML”？

Posted 2021-04-08

我正在开发某种文档网站，我希望将Angular组件与其代码并排放置，因为它在编辑器中显示。所以它已准备好进行复制粘贴。

我试图得到元素的innerhtml，但我得到的不是原始代码。那可能吗？我想避免重复我的代码（一次显示它，第二次在<xmp>标签中显示它以供另一个开发人员复制粘贴）。

所以基本上我正在寻找一种解决方案，它总是反映出编辑器中出现的特定元素的原始代码。

有任何想法吗？

答案

我的同事用一个很好的指令帮我解决了这个问题。

http://codepen.io/rogierpennink/pen/dNpwPa?editors=1111

.directive('htmlExtract', function() {

  return {
    restrict: 'EA',
    scope: {
      htmlExtractTarget: '='
    },
    link: {
      'pre': function(scope, element) {
        document.getElementById(scope.htmlExtractTarget).innerText = element[0].innerHTML;      
    }
    }
  };

});