AngularJS：如何获得在＆QUOT原指令HTML;模板＆QUOT;使用transclusion时功能？

问题描述

要获得在模板指令的原始HTML 函数，我们可以这样做：

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>';
    }
  };
});

不过，当指令有 transclude：真正的，这个方法行不通了：

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

有没有办法让在模板函数原始的HTML 使用transclusion什么时候？

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

的最终目标是present原始的HTML用户：

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>';
    }
  };
});

推荐答案

我能想到的一个方法是使用另外一个指令，它会内容通俗易懂由标识符保存到一个服务。因此，它意味着你将需要添加一个指令，它做这个目的。这确实捕获的指令必须有较高的优先级是使用它的任何其他指令。

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.

例如： -

.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

这篇关于AngularJS：如何获得在＆QUOT原指令HTML;模板＆QUOT;使用transclusion时功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！