AngularJs $transclude - 如何访问克隆对象的 html 内容？

Question

我试图访问指令中 $transclude 函数内部“克隆”对象的内容，但 clone.html() 返回未定义。如何访问指令元素/克隆的 html 内容？

.directive('somedirective', function(){
    return {
        restrict: 'EA'
        , replace: true
        , transclude: true
        , scope: true
         , controller: function ($scope, $element, $transclude, $log) {
             $transclude(function (clone) {
                 console.log(clone.html()); //undefined??
                 console.log(clone.text()); //works but strips the html tags
                 // How do I access the html content of clone???
                })
             }
         }

SEE PLUNKER

Answer 1

您未定义，因为您的克隆实际上是三个元素:text-div-text。因此，删除 <drt> and <div> 之间的空格修复了部分问题，因此“clone.html()”将打印“testing”。问题的第二部分是 .html() 使用“innerHTML”属性，因此它不会包含克隆的根 DOM 元素。相反，尝试使用 clone[0].outerHTML或angular.element("<div/>").append(clone).html() .

http://plnkr.co/edit/mOnlFLJMHkQ0iQIeZTwd?p=preview

controller: function($scope, $element, $transclude, $log){
 $transclude(function(clone) {
     console.log(clone[0].innerHTML); //undefined??
     console.log(clone[0].outerHTML); //undefined??
     console.log(angular.element("<div/>").append(clone).html()); //undefined??
     console.log(clone.text()); //works but strips the html tags    
  });