Question

我正在尝试创建一个自定义指令，它将用模板替换自己，并将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());
              };
          }
      }
    });

用法：

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

小提琴：http://jsfiddle.net/uefnx/1/

Answer 1

您可以像这样

访问指令包装的innerHTML

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

手动复制HTML内容的指令

1 个答案: