कोणीय निर्देश के भीतर मूल transcluded सामग्री प्राप्त करें

Question

मेरा लक्ष्य एक editable निर्देश एक उपयोगकर्ता जो करने के लिए विशेषता जुड़ा हुआ है किसी भी तत्व का HTML संपादित करने की अनुमति देता है कि बनाने के लिए है (Plunker देखें: http://plnkr.co/edit/nIrr9Lu0PZN2PdnhQOC6)

यह लगभग को छोड़कर काम करता है मुझे पाठ क्षेत्र को प्रारंभ करने के लिए स्थानांतरित सामग्री का मूल कच्चा HTML नहीं मिल सकता है। मैं इसे clone.text() से टेक्स्ट प्राप्त कर सकता हूं, लेकिन इसमें <H1>, <div> इत्यादि जैसे एचटीएमएल टैग गायब हैं, इसलिए कोई संपादन के साथ आवेदन पर क्लिक करना बेवकूफ नहीं है।

विधि clone.html() एक त्रुटि फेंकता है, Cannot read property 'childNodes' of undefined

app.directive("editable", function($rootScope) { 
    return { 
    restrict: "A", 
    templateUrl: "mytemplate.html", 
    transclude: true, 
    scope: { 
     content: "=editContent" 
    }, 

    controller: function($scope, $element, $compile, $transclude, $sce) { 

     // Initialize the text area with the original transcluded HTML... 
     $transclude(function(clone, scope) { 

     // This almost works but strips out tags like <h1>, <div>, etc. 
     // $scope.editContent = clone.text().trim(); 

     // this works much better per @Emmentaler, tho contains expanded HTML 
     var html = ""; 
     for (var i=0; i<clone.length; i++) { 
      html += clone[i].outerHTML||'';} 
     }); 
     $scope.editContent = html; 

     $scope.onEdit = function() { 
     // HACK? Using jQuery to place compiled content 
     $(".editable-output",$element).html(
      // compiling is necessary to render nested directives 
      $compile($scope.editContent)($rootScope) 
     ); 
     } 

     $scope.showEditor = false; 

     $scope.toggleEditor = function() { 
     $scope.showEditor = !$scope.showEditor; 
     }   
    } 
    } 
}); 

(यह सवाल अनिवार्य रूप से, पहले के एक सवाल फ्रेम करने के लिए प्रयास के बाद सवाल और कोड की एक थोक पुनर्लेखन है Get original transcluded content in Angular directive)

Answer 1

$element.innerHTML चाहिए मूल HTML शामिल है। मैं दिखा रहा हूं कि इसमें

<div class="editable"> 
    <span class="glyphicon glyphicon-edit" ng-click="toggleEditor()"></span> 

    <div class="editable-input" ng-show="showEditor"> 
     <b><p>Enter well-formed HTML content:</p></b> 
     <p>E.g.<code>&lt;h1&gt;Hello&lt;/h1&gt;&lt;p&gt;some text&lt;/p&gt;&lt;clock&gt;&lt;/clock&gt;</code></p> 
     <textarea ng-model="editContent"></textarea> 
     <button class="btn btn-primary" ng-click="onEdit()">apply</button> 
    </div> 

    <div class="editable-output" ng-transclude=""></div> 
    </div>