AngularJS: How to get the original directive HTML in the “template” function when using transclusion?

问题

DEMO

To get the original HTML of the directive in the template function one could do:

HTML:

<div my-directive>
  <input type="text">
</div>

JS:

angular.module('App', []).directive('myDirective', function() {
  return {
    template: function(element) {
      console.log(element.html()); // Outputs <input type="text">
      return '<div>Template</div>';
    }
  };
});

But, when the directive has transclude: true, this method doesn't work anymore:

angular.module('App', []).directive('myDirective', function() {
  return {
    transclude: true,
    template: function(element) {
      console.log(element.html()); // Outputs empty string
      return '<div>Template</div>';
    }
  };
});

Is there a way to get the original HTML in the template function when using transclusion?

The ultimate goal is to present the original HTML to the user:

angular.module('App', []).directive('myDirective', function() {
  return {
    transclude: true,
    template: function(element) {
      var originalHTML = "How do I get it?";

      return '<div>' +
             '  <pre>' +
                  escapeHtml(originalHTML) + // This is the original HTML
             '  </pre>' +
             '  <div ng-transclude></div>' + // and this is how it looks like
             '</div>';
    }
  };
});

PLAYGROUND HERE

回答1:

One way i could think of is to use another directive which will save the content to a service accessibly by an identifier. So it mean you would need to add another directive which does this purpose. The directive which does the capture must have higher priority that any other directive that uses it.

Example:-

.directive('myDirective', function(origContentService) {
  return {

    priority:100,
    transclude: true,
    template: '<div>Template</div>',
    link:function(scope, elm){
         //get prop and get content
      console.log(origContentService.getContent(elm.idx));
    }
  };
}).directive('capture', function(origContentService){
  return {
    restrict:'A',
    priority:200, //<-- This must be higher
    compile:function(elm){
      //Save id and set prop
     elm.idx =  origContentService.setContent(elm.html());
     }
  }
}).service('origContentService', function(){
  var contents = {};
  var idx = 0;
  this.getContent= function(idx){
    return contents[idx];
  }
  this.setContent = function(content){
    contents[++idx] = content;
    return idx;
  }
  this.cleanup = function(){
    contents = null;
  }
});

and use capture directive along with this:-

   <div  my-directive capture>
     <input type="text">
   </div>

Demo

Or just save the content as data (or a property) itself on the element. so that when the element gets destroyed so will its property.

.directive('myDirective', function() {
  return {

    priority:100,
    transclude: true,
    template: '<div>Template</div>',
    link:function(scope, elm){

      console.log(elm.data('origContent'));
    }
  };
}).directive('capture', function(){
  return {
    restrict:'A',
    priority:200,
    compile:function(elm){

     elm.data('origContent', elm.html());
     }
  }
});

Demo

回答2:

You have to define where in your template the original HTML code should be inserted.

For Example:

angular.module('App', []).directive('myDirective', function() {
    return {
          template: '<div>Template</div><ng-transclude></ng-transclude>';
    }
 });

This will place original HTML after <div>Template</div>

来源：https://stackoverflow.com/questions/26270923/angularjs-how-to-get-the-original-directive-html-in-the-template-function-whe