Javascript 手动复制HTML内容的指令

我正在尝试创建一个自定义指令，该指令将用模板替换自身，并将

text（）

复制到替换的版本

为什么不使用

ng transclude

？好吧，这是一种过分的做法，因为指令中没有HTML，只有我想复制的文本。它还创建了另一个HTML元素，这有点浪费

问题是，在有模板的地方，Angular会将模板作为

$element

传递，而据我所知，无法访问原始内容。绑定也不起作用，因为值不在属性中，而是在元素的内容中

指令：

angular.module('ui', [])
.directive('foo', 
    function() {
      return {
        restrict: 'E',
          replace: true,
          template: '<p>Insert here</p>',
          compile: function(element, attrs) {
              console.log('compile time text: ' + element.text());
              return function($scope, element, attrs) {
                  console.log('link time text: ' + element.text());
              };
          }
      }
    });

angular.module（'ui'，[]）
.指令（“foo”，
函数（）{
返回{
限制：'E'，
替换：正确，
模板：“在此处插入”
，
编译：函数（元素、属性）{
log（'编译时文本：'+element.text（））；
返回函数（$scope、element、attrs）{
log（'链接时间文本：'+element.text（））；
};
}
}
});

用法：

<div ng-app="ui">
    <foo>This should be copied</foo>
</div>

这应该被复制

---

Fiddle:

您可以像这样访问由指令包装的innerHTML

var text = element.$$element.context.innerHTML;